diff --git a/client/src/UserList.tsx b/client/src/UserList.tsx
index 46a2d98..62e1cce 100644
--- a/client/src/UserList.tsx
+++ b/client/src/UserList.tsx
@@ -146,121 +146,121 @@ const UserList: React.FC<UserListProps> = (props: UserListProps) => {
   }, [users, sendJsonMessage]);
 
   return (
-    <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) => (
-          <Box
-            key={user.session_id}
-            sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
-            className={`UserEntry ${user.local ? "UserSelf" : ""}`}
-          >
-            <Box>
-              <Box style={{ display: "flex-wrap", alignItems: "center", justifyContent: "space-between" }}>
-                <Box style={{ display: "flex-wrap", alignItems: "center" }}>
-                  <div className="Name">{user.name ? user.name : user.session_id}</div>
-                  {user.protected && (
-                    <div
-                      style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
-                      title="This name is protected with a password"
-                    >
-                      🔒
-                    </div>
-                  )}
+    <Box sx={{ position: "relative", width: "100%" }}>
+      <Paper
+        className={`UserList ${videoClass}`}
+        sx={{
+          maxWidth: { xs: "100%", sm: 500 },
+          p: { xs: 1, sm: 2 },
+          m: { xs: 0, sm: 2 },
+        }}
+      >
+        <MediaAgent {...{ session, socketUrl, peers, setPeers }} />
+        <List className="UserSelector">
+          {users?.map((user) => (
+            <Box
+              key={user.session_id}
+              sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
+              className={`UserEntry ${user.local ? "UserSelf" : ""}`}
+            >
+              <Box>
+                <Box style={{ display: "flex-wrap", alignItems: "center", justifyContent: "space-between" }}>
+                  <Box style={{ display: "flex-wrap", alignItems: "center" }}>
+                    <div className="Name">{user.name ? user.name : user.session_id}</div>
+                    {user.protected && (
+                      <div
+                        style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
+                        title="This name is protected with a password"
+                      >
+                        🔒
+                      </div>
+                    )}
+                    {user.bot_instance_id && (
+                      <div style={{ marginLeft: 8, fontSize: "0.8em", color: "#00a" }} title="This is a bot">
+                        🤖
+                      </div>
+                    )}
+                  </Box>
                   {user.bot_instance_id && (
-                    <div style={{ marginLeft: 8, fontSize: "0.8em", color: "#00a" }} title="This is a bot">
-                      🤖
-                    </div>
+                    <Paper elevation={2} sx={{ display: "flex-wrap", gap: "4px", p: 1 }}>
+                      {user.bot_run_id && (
+                        <IconButton
+                          size="small"
+                          onClick={() => handleOpenBotConfig(user)}
+                          style={{ width: "24px", height: "24px", fontSize: "0.7em" }}
+                          title="Configure bot"
+                        >
+                          <SettingsIcon style={{ fontSize: "14px" }} />
+                        </IconButton>
+                      )}
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color="secondary"
+                        onClick={() => handleBotLeave(user)}
+                        disabled={leavingBots.has(user.session_id) || !user.bot_instance_id}
+                        style={{ fontSize: "0.7em", minWidth: "50px", height: "24px" }}
+                        title={!user.bot_instance_id ? "Bot instance ID not available" : "Remove bot from lobby"}
+                      >
+                        {leavingBots.has(user.session_id) ? "..." : "Leave"}
+                      </Button>
+                    </Paper>
                   )}
                 </Box>
-                {user.bot_instance_id && (
-                  <Paper elevation={2} sx={{ display: "flex-wrap", gap: "4px", p: 1 }}>
-                    {user.bot_run_id && (
-                      <IconButton
-                        size="small"
-                        onClick={() => handleOpenBotConfig(user)}
-                        style={{ width: "24px", height: "24px", fontSize: "0.7em" }}
-                        title="Configure bot"
-                      >
-                        <SettingsIcon style={{ fontSize: "14px" }} />
-                      </IconButton>
-                    )}
-                    <Button
-                      size="small"
-                      variant="outlined"
-                      color="secondary"
-                      onClick={() => handleBotLeave(user)}
-                      disabled={leavingBots.has(user.session_id) || !user.bot_instance_id}
-                      style={{ fontSize: "0.7em", minWidth: "50px", height: "24px" }}
-                      title={!user.bot_instance_id ? "Bot instance ID not available" : "Remove bot from lobby"}
-                    >
-                      {leavingBots.has(user.session_id) ? "..." : "Leave"}
-                    </Button>
-                  </Paper>
-                )}
+                {user.name && !user.live && <div className="NoNetwork"></div>}
               </Box>
-              {user.name && !user.live && <div className="NoNetwork"></div>}
+              {user.name && user.live && peers[user.session_id] && (user.local || user.has_media !== false) ? (
+                <MediaControl
+                  className={videoClass}
+                  key={user.session_id}
+                  peer={peers[user.session_id]}
+                  isSelf={user.local}
+                />
+              ) : user.name && user.live && user.has_media === false ? (
+                <div
+                  className="Video fade-in"
+                  style={{
+                    background: "#333",
+                    color: "#fff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "100%",
+                    height: "100%",
+                    fontSize: "14px",
+                  }}
+                >
+                  💬 Chat Only
+                </div>
+              ) : (
+                <video className="Video"></video>
+              )}
             </Box>
-            {user.name && user.live && peers[user.session_id] && (user.local || user.has_media !== false) ? (
-              <MediaControl
-                className={videoClass}
-                key={user.session_id}
-                peer={peers[user.session_id]}
-                isSelf={user.local}
-              />
-            ) : user.name && user.live && user.has_media === false ? (
-              <div
-                className="Video fade-in"
-                style={{
-                  background: "#333",
-                  color: "#fff",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: "100%",
-                  height: "100%",
-                  fontSize: "14px",
-                }}
-              >
-                💬 Chat Only
-              </div>
-            ) : (
-              <video className="Video"></video>
-            )}
-          </Box>
-        ))}
-      </List>
+          ))}
+        </List>
 
-      {/* Bot Configuration Dialog */}
-      <Dialog open={botConfigDialogOpen} onClose={handleCloseBotConfig} maxWidth="md" fullWidth>
-        <DialogTitle>Configure Bot</DialogTitle>
-        <DialogContent>
-          {selectedBotForConfig && (
-            <BotConfig
-              botInstanceId={selectedBotForConfig.bot_instance_id || ""}
-              botName={selectedBotForConfig.name?.replace(/-bot$/, "") || "unknown"}
-              lobbyId={lobbyId}
-              onConfigUpdate={(config) => {
-                console.log("Bot configuration updated:", config);
-                // Configuration updates are handled via WebSocket, so we don't need to do anything special here
-              }}
-            />
-          )}
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleCloseBotConfig}>Close</Button>
-        </DialogActions>
-      </Dialog>
-    </Paper>
+        {/* Bot Configuration Dialog */}
+        <Dialog open={botConfigDialogOpen} onClose={handleCloseBotConfig} maxWidth="md" fullWidth>
+          <DialogTitle>Configure Bot</DialogTitle>
+          <DialogContent>
+            {selectedBotForConfig && (
+              <BotConfig
+                botInstanceId={selectedBotForConfig.bot_instance_id || ""}
+                botName={selectedBotForConfig.name?.replace(/-bot$/, "") || "unknown"}
+                lobbyId={lobbyId}
+                onConfigUpdate={(config) => {
+                  console.log("Bot configuration updated:", config);
+                  // Configuration updates are handled via WebSocket, so we don't need to do anything special here
+                }}
+              />
+            )}
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleCloseBotConfig}>Close</Button>
+          </DialogActions>
+        </Dialog>
+      </Paper>
+    </Box>
   );
 };