From 1ef491f39a4952af66d2f86b8cc50b832ba5327a Mon Sep 17 00:00:00 2001
From: James Magahern <james@magahern.com>
Date: Thu, 6 Aug 2026 23:28:42 -0700
Subject: [PATCH] Add foldable split-pane layout

---
 web/src/App.tsx   | 10 +++++-----
 web/src/index.css | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 95e66e1..cb42fc3 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -3246,11 +3246,11 @@ export default function App() {
 
   return (
     <div className="app-grid-surface app-safe-frame h-full">
-      <div className="flex h-full w-full overflow-hidden bg-transparent md:gap-2">
+      <div className="workspace-shell flex h-full w-full overflow-hidden bg-transparent md:gap-2">
         {isMobileSidebarOpen ? (
           <button
             type="button"
-            className="fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden"
+            className="workspace-sidebar-backdrop fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden"
             onClick={() => setIsMobileSidebarOpen(false)}
             aria-label="Close sidebar"
           />
@@ -3258,7 +3258,7 @@ export default function App() {
 
         <aside
           className={cn(
-            "glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
+            "workspace-sidebar glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
             isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
           )}
         >
@@ -3401,7 +3401,7 @@ export default function App() {
         </aside>
 
         <main
-          className="glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
+          className="workspace-content glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
           onTouchStart={handleMobileWorkspaceTouchStart}
           onTouchMove={handleMobileWorkspaceTouchMove}
           onTouchEnd={handleMobileWorkspaceTouchEnd}
@@ -3413,7 +3413,7 @@ export default function App() {
                 type="button"
                 size="icon"
                 variant="ghost"
-                className="-ml-1 h-8 w-8 md:hidden"
+                className="workspace-sidebar-trigger -ml-1 h-8 w-8 md:hidden"
                 onClick={() => setIsMobileSidebarOpen(true)}
                 aria-label="Open sidebar"
               >
diff --git a/web/src/index.css b/web/src/index.css
index 55b0e33..d9a7839 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -131,6 +131,45 @@ textarea {
   }
 }
 
+@media (horizontal-viewport-segments: 2) {
+  .app-safe-frame {
+    padding:
+      max(0.5rem, var(--safe-area-top))
+      max(0.5rem, var(--safe-area-right))
+      max(0.5rem, var(--safe-area-bottom))
+      max(0.5rem, var(--safe-area-left));
+  }
+
+  .workspace-shell {
+    display: grid;
+    grid-template-columns:
+      calc(env(viewport-segment-width 0 0) - max(0.5rem, var(--safe-area-left)))
+      calc(env(viewport-segment-width 1 0) - max(0.5rem, var(--safe-area-right)));
+    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
+  }
+
+  .workspace-sidebar {
+    position: static;
+    width: 100%;
+    max-width: none;
+    transform: none;
+    border-width: 1px;
+    border-radius: 1rem;
+  }
+
+  .workspace-content {
+    min-width: 0;
+    border-width: 1px;
+    border-radius: 1rem;
+    touch-action: auto;
+  }
+
+  .workspace-sidebar-backdrop,
+  .workspace-sidebar-trigger {
+    display: none;
+  }
+}
+
 .glass-panel {
   background:
     linear-gradient(180deg, hsl(243 42% 12% / 0.88), hsl(236 48% 5% / 0.92)),