Merge pull request #724 from streamplace/natb/make-dashboard-scrollable-native

fix: make dashboard properly scrollable on native

js/app/components/live-dashboard/bento-grid.tsx

···
   useProfile,
   useSegment,
   useSegmentTiming,
+  useTheme,
   zero,
 } from "@streamplace/components";
 import {
   ProblemsWrapper,
   ProblemsWrapperRef,
 } from "@streamplace/components/src/components/dashboard/problems";
+import { ArrowRight } from "lucide-react-native";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Dimensions, Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import LivestreamPanel from "./livestream-panel";
 import StreamMonitor from "./stream-monitor";
 
···
   }, [isWeb]);
 
   const isDesktop = screenWidth >= 1200;
+
+  const insets = useSafeAreaInsets();
+  const { theme } = useTheme();
 
   // Get data from hooks for Dashboard components
   const profile = useProfile();
···
 
   return (
     <ProblemsWrapper ref={problemsRef}>
-      <ScrollView style={[flex.values[1], bg.black]}>
+      <>
         {/* Header always at top */}
         <View style={[p[4]]}>
           <Dashboard.Header
···
             onProblemsPress={handleProblemsPress}
           />
         </View>
-
-        {/* Fixed layout with flex */}
-        <View
-          style={[
-            flex.values[1],
-            layout.flex.column,
-            gap.all[4],
-            p[4],
-            { paddingTop: 0 },
-          ]}
+        <ScrollView
+          contentContainerStyle={{ paddingBottom: insets.bottom }}
+          style={[flex.values[1], bg.black]}
         >
-          {/* Stream Monitor Panel */}
-          <View style={[{ maxHeight: screenHeight * 0.35, height: "100%" }]}>
-            <StreamMonitor
-              isLive={isLive}
-              userProfile={profile}
-              videoRef={videoRef}
-            />
-          </View>
-
-          {/* Chat Panel - takes remaining space */}
-          <View style={[flex.values[1], { maxHeight: screenHeight * 0.65 }]}>
+          <View style={[gap.all[4], p[4], { paddingTop: 0 }]}>
+            {/* Stream Monitor Panel */}
+            <View style={[{ height: screenHeight * 0.35 }]}>
+              <StreamMonitor
+                isLive={isLive}
+                userProfile={profile}
+                videoRef={videoRef}
+              />
+            </View>
             <Button
               disabled={!profile}
               onPress={() =>
                 navigation.navigate("PopoutChat", { user: profile!.did })
               }
+              size="lg"
+              rightIcon={<ArrowRight size="18" color={theme.colors.text} />}
             >
               Go to chat
             </Button>
-          </View>
-
-          {/* Livestream Panel */}
-          <View style={[{ height: "auto" }]}>
-            <LivestreamPanel />
+            <View>
+              <LivestreamPanel scrollable={false} />
+            </View>
           </View>
-        </View>
-      </ScrollView>
+        </ScrollView>
+      </>
     </ProblemsWrapper>
   );
 }

js/app/components/live-dashboard/livestream-panel.tsx

···
   );
 };
 
-function LivestreamPanel() {
+function LivestreamPanel({ scrollable = true }: { scrollable?: boolean }) {
   const toast = useToast();
   const userIsLive = useLiveUser();
   const captureFrame = useCaptureVideoFrame();
···
     return mode === "create" ? "Announce Livestream!" : "Update Livestream!";
   }, [loading, userIsLive, mode]);
 
+  const Wrapper = scrollable ? ScrollView : View;
+  const wrapperProps = scrollable
+    ? {
+        contentContainerStyle: {
+          flexGrow: 1,
+        },
+        showsVerticalScrollIndicator: false,
+      }
+    : {};
+
   return (
     <>
-      <ScrollView
-        contentContainerStyle={{
-          flexGrow: 1,
-        }}
-        showsVerticalScrollIndicator={false}
-      >
+      <Wrapper {...wrapperProps}>
         <View
           style={[
             flex.values[1],
···
             </View>
           )}
         </View>
-      </ScrollView>
+      </Wrapper>
     </>
   );
 }

js/app/components/live-dashboard/stream-key.tsx

···
   Button,
   Code,
   Row,
-  View,
+  Text,
   useTheme,
   useToast,
+  View,
 } from "@streamplace/components";
 import { Redirect } from "components/aqlink";
 import Loading from "components/loading/loading";
···
           <FormRow>
             <Label>Output Settings</Label>
             <Content>
-              <Body>
-                Output mode: Advanced
-                <br />
+              <Text>Output mode: Advanced</Text>
+              <Text>
                 Keyframe Interval: <Code>1s</Code>
-                <br />
+              </Text>
+              <Text>
                 x264 Options: <Code>bframes=0</Code>
-              </Body>
+              </Text>
             </Content>
           </FormRow>
         </View>

js/app/components/settings/settings.tsx

···
   const isReady = useIsReady();
   const serverSettings = useServerSettings();
   const { url } = useStreamplaceNode();
-  const { t } = useTranslation();
+  const { t } = useTranslation("settings");
   const debugRecordingOn = serverSettings?.debugRecording === true;
 
   useEffect(() => {

js/app/src/screens/live-dashboard.tsx

···
 import { VideoElementProvider } from "contexts/VideoElementContext";
 import { useLiveUser } from "hooks/useLiveUser";
 import { useCallback, useState } from "react";
-import { View } from "react-native";
 import { useIsReady, useUserProfile } from "store/hooks";
 
 const { flex, bg } = zero;
···
     <LivestreamProvider src={userProfile.did}>
       <VideoElementProvider videoElement={videoElement}>
         <PlayerProvider>
-          <View style={[flex.values[1], bg.gray[900]]}>
-            <BentoGrid isLive={isLive} videoRef={videoRef} />
-          </View>
+          <BentoGrid isLive={isLive} videoRef={videoRef} />
         </PlayerProvider>
       </VideoElementProvider>
     </LivestreamProvider>

js/components/src/components/content-metadata/content-metadata-form.tsx

···
                       ]}
                     >
                       <Text
+                        leading="tight"
                         style={[
                           text.neutral[300],
                           {
                             minWidth: 100,
+                            maxWidth: 100,
                             textAlign: "left",
                             paddingBottom: 8,
                             fontSize: 14,
                           },
                         ]}
                       >
-                        Allowed<br></br>Broadcasters
+                        Allowed Broadcasters
                       </Text>
                       <View style={[flex.values[1]]}>
                         <Text