Merge pull request #331 from streamplace/natb/weird-chat-alignment

chat: rework layout so it's much more useable on mobile

js/app/components/mobile/chat.tsx

···
 
 export function ChatPanel() {
   return (
-    <>
-      <View style={[flex.shrink[1], px[4]]}>
-        <Chat />
-      </View>
+    <View
+      style={[
+        layout.flex.column,
+        flex.shrink[1],
+        { width: "100%", maxWidth: "100%" },
+      ]}
+    >
+      <Chat />
       <View style={[layout.flex.column, gap.all[2], px[4], py[2]]}>
         <ChatBox chatBoxStyle={{ borderRadius: borderRadius.xl }} />
       </View>
-    </>
+    </View>
   );
 }

js/app/components/mobile/ui.tsx

···
   useSegmentTiming as useSegmentMetrics,
   View,
 } from "@streamplace/components";
+import { bottom, zIndex } from "@streamplace/components/src/lib/theme/atoms";
 import { ChevronLeft, SwitchCamera } from "lucide-react-native";
 import { useEffect } from "react";
 import { Image, Pressable } from "react-native";
···
           slideKeyboard={slideKeyboard}
         />
       ) : (
-        <Resizable
-          isPlayerRatioGreater={isPlayerRatioGreater}
-          slideKeyboard={slideKeyboard}
+        <View
+          style={[
+            isPlayerRatioGreater
+              ? layout.position.absolute
+              : layout.position.relative,
+            zIndex[50],
+            bottom[0],
+          ]}
         >
-          <ChatPanel />
-        </Resizable>
+          <Resizable
+            isPlayerRatioGreater={isPlayerRatioGreater}
+            slideKeyboard={slideKeyboard}
+          >
+            <ChatPanel />
+          </Resizable>
+        </View>
       )}
 
       <PlayerUI.CountdownOverlay

js/components/src/components/chat/chat-box.tsx

···
   useSetReplyToMessage,
   View,
 } from "../../";
-import { bg, gap, h, layout, mb, pl, pr, w } from "../../lib/theme/atoms";
+import { bg, flex, gap, h, layout, mb, pl, pr, w } from "../../lib/theme/atoms";
 import { Textarea } from "../ui/textarea";
 import { RenderChatMessage } from "./chat-message";
 import { MentionSuggestions } from "./mention-suggestions";
···
   }, [replyTo]);
 
   return (
-    <View style={{ position: "relative" }}>
+    <View style={[layout.flex.column, flex.shrink[1], gap.all[2]]}>
       {replyTo && (
         <View
           style={[
···
           ref={textAreaRef}
           numberOfLines={1}
           value={message}
+          enterKeyHint="send"
+          multiline={false}
           onChangeText={(text) => {
             setMessage(text);
             updateSuggestions(text);

js/components/src/components/ui/textarea.tsx

···
 import * as React from "react";
 import { TextInput, type TextInputProps } from "react-native";
-import { bg, borders, p, text, w } from "../../lib/theme/atoms";
+import { bg, borders, flex, p, text } from "../../lib/theme/atoms";
 
 function Textarea({
   style,
···
   return (
     <TextInput
       style={[
-        w.percent[100],
+        flex.values[1],
         borders.width.thin,
         borders.color.gray[400],
         bg.gray[900],