feat: mobile-responsive layout

- Mobile (<md): single-panel view, sidebar/chat/members as overlays
- Hamburger button toggles sidebar overlay (ServerBar + ChannelList)
- Members button toggles MemberList overlay
- ← back button in ChatArea and DMChat headers returns to sidebar
- Auto-switch to chat view when channel or DM is selected
- Tap empty area to dismiss overlays
- Desktop layout unchanged (all panels side by side)
- Status/settings buttons hidden on small screens to save space

web/src/components/Layout.tsx

@@ -38,8 +38,11 @@ export function Layout() {
   const location = useLocation();
   const [showStatusMenu, setShowStatusMenu] = useState(false);
   const isDM = useLayoutStore((s) => s.isDM);
+  const mobileView = useLayoutStore((s) => s.mobileView);
+  const setMobileView = useLayoutStore((s) => s.setMobileView);
   const [showServerSettings, setShowServerSettings] = useState(false);
   const activeServerId = useServerStore((s) => s.activeServerId);
+  const activeChannelId = useServerStore((s) => s.activeChannelId);
   useEffect(() => {
     wsConnect();
     return () => { wsDisconnect(); };
@@ -49,6 +52,21 @@ export function Layout() {
       navigate('/login', { replace: true });
     }
   }, [isLoading, isAuthenticated, location.pathname, navigate]);
+  // Navigate to chat when a channel/DM is selected on mobile
+  useEffect(() => {
+    const unsub = useServerStore.subscribe((state, prev) => {
+      if (state.activeChannelId !== prev.activeChannelId && state.activeChannelId) {
+        setMobileView('chat');
+      }
+    });
+    return unsub;
+  }, [setMobileView]);
+  // Also switch to chat on mobile when navigating to a DM
+  useEffect(() => {
+    if (location.pathname.startsWith('/dm/') && location.pathname !== '/dm') {
+      setMobileView('chat');
+    }
+  }, [location.pathname, setMobileView]);
   const handleStatusChange = async (status: UserStatus) => {
     setShowStatusMenu(false);
     try {
@@ -69,21 +87,32 @@ export function Layout() {
     return null;
   }
   return (
-    <div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col p-2">
+    <div className="h-full w-full bg-gb-bg text-gb-fg font-mono flex flex-col p-1 md:p-2">
       <div className="flex-1 terminal-border bg-gb-bg-h flex flex-col min-h-0">
-        <div className="flex items-center justify-between px-3 py-1 border-b border-gb-bg-t bg-gb-bg-s">
-          <span className="text-gb-orange font-bold">DUMPSTER</span>
-          <div className="flex items-center gap-4 text-xs text-gb-fg-s">
+        {/* Top bar */}
+        <div className="flex items-center justify-between px-2 md:px-3 py-1 border-b border-gb-bg-t bg-gb-bg-s gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            {/* Mobile: hamburger to show sidebar */}
+            <button
+              type="button"
+              onClick={() => setMobileView(mobileView === 'sidebar' ? 'chat' : 'sidebar')}
+              className="md:hidden terminal-button text-xs px-2 py-0.5 shrink-0"
+            >
+              {mobileView === 'sidebar' ? '✕' : '☰'}
+            </button>
+            <span className="text-gb-orange font-bold shrink-0">DUMPSTER</span>
+          </div>
+          <div className="flex items-center gap-2 md:gap-4 text-xs text-gb-fg-s min-w-0">
             <div className="relative">
               <button
                 type="button"
                 onClick={() => setShowStatusMenu((prev) => !prev)}
-                className="flex items-center gap-2 hover:text-gb-fg transition-colors"
+                className="flex items-center gap-1 md:gap-2 hover:text-gb-fg transition-colors"
                 title="Change status"
               >
                 <span className={`w-2.5 h-2.5 rounded-full ${statusColor(currentStatus)}`} />
-                <span className="text-gb-aqua">{user?.username || 'unknown'}</span>
-                <span className="text-gb-fg-f">[{statusLabel(currentStatus)}]</span>
+                <span className="text-gb-aqua hidden sm:inline">{user?.username || 'unknown'}</span>
+                <span className="text-gb-fg-f hidden sm:inline">[{statusLabel(currentStatus)}]</span>
               </button>
               {showStatusMenu && (
                 <div className="absolute right-0 top-full mt-1 z-50 w-32 bg-gb-bg-s border border-gb-bg-t shadow-lg">
@@ -101,24 +130,61 @@ export function Layout() {
                 </div>
               )}
             </div>
-            <Link to="/settings" className="terminal-button text-xs">[SETTINGS]</Link>
+            <Link to="/settings" className="terminal-button text-xs hidden sm:inline-flex">[SETTINGS]</Link>
             {activeServerId && (
               <button
                 onClick={() => setShowServerSettings(true)}
-                className="terminal-button text-xs"
+                className="terminal-button text-xs hidden md:inline-flex"
               >
                 [SERVER SETTINGS]
               </button>
             )}
+            {/* Mobile: members toggle */}
+            {!isDM && (
+              <button
+                type="button"
+                onClick={() => setMobileView(mobileView === 'members' ? 'chat' : 'members')}
+                className="md:hidden terminal-button text-xs px-2 py-0.5"
+              >
+                {mobileView === 'members' ? '✕' : '👤'}
+              </button>
+            )}
             <button onClick={() => logout().then(() => navigate('/login'))} className="terminal-button text-xs">
               [LOGOUT]
             </button>
           </div>
         </div>
-        <div className="flex-1 flex min-h-0">
-          <ServerBar />
-          {isDM ? <ConversationList /> : <ChannelList />}
-          <div className="flex-1 min-w-0 flex flex-col">
+
+        {/* Main content area */}
+        <div className="flex-1 flex min-h-0 relative">
+          {/* Sidebar: ServerBar + ChannelList/ConversationList */}
+          {/* Desktop: always visible as left columns */}
+          {/* Mobile: full-screen overlay when mobileView === 'sidebar' */}
+          <div
+            className={`
+              ${mobileView === 'sidebar' ? 'flex' : 'hidden'}
+              md:flex
+              absolute md:relative inset-0 md:inset-auto z-30 md:z-auto
+              flex-shrink-0
+            `}
+          >
+            <ServerBar />
+            {isDM ? <ConversationList /> : <ChannelList />}
+            {/* Close sidebar on mobile after selection */}
+            <div
+              className="flex-1 md:hidden"
+              onClick={() => setMobileView('chat')}
+            />
+          </div>
+
+          {/* Chat area: always in DOM, hidden on mobile when sidebar/members shown */}
+          <div
+            className={`
+              ${mobileView === 'chat' ? 'flex' : 'hidden'}
+              md:flex
+              flex-1 min-w-0 flex-col
+            `}
+          >
             <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
               <VoicePanel />
               <div className="flex-1 min-h-0">
@@ -126,12 +192,33 @@ export function Layout() {
               </div>
             </div>
           </div>
-          {!isDM && <MemberList />}
+
+          {/* Members panel */}
+          {/* Desktop: right column */}
+          {/* Mobile: full-screen overlay when mobileView === 'members' */}
+          {!isDM && (
+            <div
+              className={`
+                ${mobileView === 'members' ? 'flex' : 'hidden'}
+                md:flex
+                absolute md:relative inset-0 md:inset-auto z-30 md:z-auto
+                flex-shrink-0
+              `}
+            >
+              {/* Tap background to close on mobile */}
+              <div
+                className="flex-1 md:hidden"
+                onClick={() => setMobileView('chat')}
+              />
+              <MemberList />
+            </div>
+          )}
         </div>
+
         {showServerSettings && activeServerId && (
           <ServerSettingsModal serverId={activeServerId} onClose={() => setShowServerSettings(false)} />
         )}
-        <div className="px-3 py-1 border-t border-gb-bg-t text-xs text-gb-fg-f flex justify-between bg-gb-bg-s">
+        <div className="px-2 md:px-3 py-1 border-t border-gb-bg-t text-xs text-gb-fg-f flex justify-between bg-gb-bg-s">
           <span>TERM {__APP_VERSION__}</span>
           <span>{new Date().toISOString().slice(0, 10)}</span>
         </div>