From d4b3bc6ce4cc32f13fc9a83f5f0b2066653b3c3f Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Tue, 16 Sep 2025 10:03:37 -0700
Subject: [PATCH] Mobile UI changes

---
 client/src/App.tsx        | 18 ++++++++++++++----
 client/src/BotManager.tsx | 11 ++++++++++-
 client/src/LobbyChat.tsx  | 16 ++++++++++++++--
 client/src/UserList.tsx   | 11 ++++++++++-
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index b753b36..1edb65a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -205,12 +205,22 @@ const LobbyView: React.FC<LobbyProps> = (props: LobbyProps) => {
   };
 
   return (
-    <Paper className="Lobby" sx={{ p: 2, m: 2, width: "fit-content" }}>
+    <Paper
+      className="Lobby"
+      sx={{
+        p: { xs: 1, sm: 2 },
+        m: { xs: 0, sm: 2 },
+        width: { xs: "100%", sm: "fit-content" },
+        maxWidth: { xs: "100%", sm: 600 },
+      }}
+    >
       {readyState !== ReadyState.OPEN || !session ? (
         <ConnectionStatus readyState={readyState} reconnectAttempt={reconnectAttempt} />
       ) : (
         <>
-          <Box sx={{ mb: 2, display: "flex", gap: 2, alignItems: "flex-start", flexDirection: "column" }}>
+          <Box
+            sx={{ mb: 2, display: "flex", gap: 2, alignItems: "flex-start", flexDirection: { xs: "column", sm: "row" } }}
+          >
             <Box>
               <Typography variant="h5">AI Voice Chat Lobby: {lobbyName}</Typography>
               <Typography variant="caption">
@@ -226,7 +236,7 @@ const LobbyView: React.FC<LobbyProps> = (props: LobbyProps) => {
                     You can optionally set a password to reserve this name; supply it again to takeover the name from
                     another client.
                   </Typography>
-                  <Box sx={{ display: "flex", gap: 1, width: "100%" }}>
+                  <Box sx={{ display: "flex", gap: 1, width: "100%", flexDirection: { xs: "column", sm: "row" } }}>
                     <Input
                       type="text"
                       value={editName}
@@ -339,7 +349,7 @@ const App = () => {
   }, [session, getSession]);
 
   return (
-    <Box>
+    <Box sx={{ p: { xs: 1, sm: 2 }, maxWidth: { xs: "100%", sm: 800 }, margin: "0 auto", height: "100vh", overflowY: "auto" }}>
       {!session && (
         <ConnectionStatus
           readyState={sessionRetryAttempt > 0 ? ReadyState.CLOSED : ReadyState.CONNECTING}
diff --git a/client/src/BotManager.tsx b/client/src/BotManager.tsx
index b9a57ea..1da4b7e 100644
--- a/client/src/BotManager.tsx
+++ b/client/src/BotManager.tsx
@@ -171,7 +171,16 @@ const BotManager: React.FC<BotManagerProps> = ({ lobbyId, onBotAdded, sx }) => {
   const providerCount = botProviders.length;
 
   return (
-    <Paper sx={{ p: 2, ...sx }}>
+    <Paper
+      sx={{
+        p: { xs: 1, sm: 2 },
+        maxWidth: { xs: "100%", sm: 500 },
+        m: { xs: 0, sm: 2 },
+        maxHeight: "80vh",
+        overflowY: "auto",
+        ...sx,
+      }}
+    >
       <Box display="flex" alignItems="center" justifyContent="space-between" mb={2}>
         <Typography variant="h6" display="flex" alignItems="center" gap={1}>
           <BotIcon />
diff --git a/client/src/LobbyChat.tsx b/client/src/LobbyChat.tsx
index 7fea855..b96ad6f 100644
--- a/client/src/LobbyChat.tsx
+++ b/client/src/LobbyChat.tsx
@@ -135,7 +135,19 @@ const LobbyChat: React.FC<LobbyChatProps> = ({ socketUrl, session, lobbyId }) =>
   };
 
   return (
-    <Paper className="lobby-chat" sx={{ height: 400, display: "flex", flexDirection: "column", p: 1 }}>
+    <Paper
+      className="lobby-chat"
+      sx={{
+        height: { xs: 300, sm: 400 },
+        display: "flex",
+        flexDirection: "column",
+        p: { xs: 1, sm: 2 },
+        maxWidth: { xs: "100%", sm: 500 },
+        m: { xs: 0, sm: 2 },
+        maxHeight: "80vh",
+        overflowY: "auto",
+      }}
+    >
       <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }}>
         <Typography variant="h6" sx={{ textAlign: "center", flexGrow: 1 }}>
           Chat
@@ -198,7 +210,7 @@ const LobbyChat: React.FC<LobbyChatProps> = ({ socketUrl, session, lobbyId }) =>
       </Box>
 
       {session.name ? (
-        <Box sx={{ display: "flex", gap: 1, alignItems: "flex-end" }}>
+        <Box sx={{ display: "flex", gap: 1, alignItems: "flex-end", flexDirection: { xs: "column", sm: "row" } }}>
           <TextField
             fullWidth
             size="small"
diff --git a/client/src/UserList.tsx b/client/src/UserList.tsx
index 00e891c..46a2d98 100644
--- a/client/src/UserList.tsx
+++ b/client/src/UserList.tsx
@@ -146,7 +146,16 @@ const UserList: React.FC<UserListProps> = (props: UserListProps) => {
   }, [users, sendJsonMessage]);
 
   return (
-    <Paper className={`UserList ${videoClass}`}>
+    <Paper
+      className={`UserList ${videoClass}`}
+      sx={{
+        maxWidth: { xs: "100%", sm: 500 },
+        p: { xs: 1, sm: 2 },
+        m: { xs: 0, sm: 2 },
+        maxHeight: "80vh",
+        overflowY: "auto",
+      }}
+    >
       <MediaAgent {...{ session, socketUrl, peers, setPeers }} />
       <List className="UserSelector">
         {users?.map((user) => (