Mobile UI changes

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}

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 />

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"

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) => (