feat(ui): default sidebar to closed on mobile viewports (#31)

On mobile (<768px), users expect the content area to be visible first.
The sidebar can still be opened via the hamburger toggle.

https://claude.ai/code/session_01BsmRarsK1A5aX9VezT3Unb

Co-authored-by: Claude <noreply@anthropic.com>

Author: nsheaps

packages/ui/src/components/App.test.tsx

@@ -111,6 +111,23 @@ describe('App', () => {
     fireEvent.click(toggle);
   });
 
+  it('sidebar starts closed on mobile viewport', async () => {
+    const originalInnerWidth = window.innerWidth;
+    Object.defineProperty(window, 'innerWidth', { value: 375, writable: true, configurable: true });
+    try {
+      const backend = new MemoryBackend();
+      seedDemoMode(backend);
+      renderApp(backend);
+      await waitFor(() => {
+        expect(screen.getByTestId('sidebar-toggle')).toBeDefined();
+      });
+      // Sidebar should be closed by default on mobile
+      expect(screen.queryByTestId('sidebar-backdrop')).toBeNull();
+    } finally {
+      Object.defineProperty(window, 'innerWidth', { value: originalInnerWidth, writable: true, configurable: true });
+    }
+  });
+
   it('opens command palette with keyboard shortcut', async () => {
     const backend = new MemoryBackend();
     seedDemoMode(backend);

packages/ui/src/components/App.tsx

@@ -89,7 +89,9 @@ export function App() {
   const [pageContents, setPageContents] = useState<Record<string, string>>({});
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(
+    () => typeof window === 'undefined' || window.innerWidth >= 768,
+  );
   const [hasStarted, setHasStarted] = useState(false);
   const [spaceName, setSpaceName] = useState<string>('My Space');
   const [trash, setTrash] = useState<SidebarPageRef[]>([]);