fix: guard mobile chat sidebar overlay

ui/src/styles/chat/sidebar.css

@@ -96,7 +96,7 @@
 
 /* Mobile: Full-screen modal */
 @media (max-width: 768px) {
-  .chat-split-container {
+  .chat-split-container--open {
     position: fixed;
     top: 0;
     left: 0;
@@ -105,14 +105,13 @@
     z-index: 1000;
   }
 
-  .chat-main {
+  .chat-split-container--open .chat-main {
     display: none; /* Hide chat on mobile when sidebar open */
   }
 
-  .chat-sidebar {
+  .chat-split-container--open .chat-sidebar {
     width: 100%;
     min-width: 0;
     border-left: none;
   }
 }
-

ui/src/ui/navigation.browser.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
 import { ClawdbotApp } from "./app";
+import "../styles.css";
 
 const originalConnect = ClawdbotApp.prototype.connect;
 
@@ -87,6 +88,34 @@ describe("control UI routing", () => {
     expect(window.location.pathname).toBe("/connections");
   });
 
+  it("keeps chat and nav usable on narrow viewports", async () => {
+    const app = mountApp("/chat");
+    await app.updateComplete;
+
+    expect(window.matchMedia("(max-width: 768px)").matches).toBe(true);
+
+    const split = app.querySelector(".chat-split-container") as HTMLElement | null;
+    expect(split).not.toBeNull();
+    if (split) {
+      expect(getComputedStyle(split).position).not.toBe("fixed");
+    }
+
+    const chatMain = app.querySelector(".chat-main") as HTMLElement | null;
+    expect(chatMain).not.toBeNull();
+    if (chatMain) {
+      expect(getComputedStyle(chatMain).display).not.toBe("none");
+    }
+
+    if (split) {
+      split.classList.add("chat-split-container--open");
+      await app.updateComplete;
+      expect(getComputedStyle(split).position).toBe("fixed");
+    }
+    if (chatMain) {
+      expect(getComputedStyle(chatMain).display).toBe("none");
+    }
+  });
+
   it("auto-scrolls chat history to the latest message", async () => {
     const app = mountApp("/chat");
     await app.updateComplete;