From 59a4b8e87e77556013ecac31909b0d8ebe6687ee Mon Sep 17 00:00:00 2001
From: Nico Ritschel <ritschel@gmail.com>
Date: Fri, 3 Jul 2026 19:52:37 -0700
Subject: [PATCH] Make AppShell responsive on narrow screens

---
 webapp/src/components/AppShell.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/AppShell.tsx b/webapp/src/components/AppShell.tsx
index b823506b..7d94f866 100644
--- a/webapp/src/components/AppShell.tsx
+++ b/webapp/src/components/AppShell.tsx
@@ -13,8 +13,8 @@ export function AppShell({ brand, toolbar, filters, rail, children }: AppShellPr
   const [railOpen, setRailOpen] = useState(true);
 
   return (
-    <div className="flex h-screen flex-col bg-bg text-ink">
-      <header className="flex items-center justify-between gap-3 border-b border-line bg-surface px-3 py-2">
+    <div className="flex h-screen min-w-0 flex-col overflow-hidden bg-bg text-ink">
+      <header className="flex shrink-0 flex-col gap-2 border-b border-line bg-surface px-3 py-2 md:flex-row md:items-center md:justify-between md:gap-3">
         <div className="flex min-w-0 items-center gap-2">
           <button
             type="button"
@@ -27,21 +27,23 @@ export function AppShell({ brand, toolbar, filters, rail, children }: AppShellPr
           </button>
           {brand}
         </div>
-        <div className="flex shrink-0 items-center gap-2">{toolbar}</div>
+        <div className="flex w-full min-w-0 flex-wrap items-center gap-2 overflow-x-auto md:w-auto md:shrink-0 md:flex-nowrap">
+          {toolbar}
+        </div>
       </header>
 
       {filters ? (
         // Fixed height so the bar doesn't jump when pills replace the "No filters" text.
-        <div className="flex h-9 shrink-0 items-center gap-2 overflow-x-auto border-b border-line bg-surface px-3">
+        <div className="flex min-h-9 shrink-0 flex-wrap items-center gap-2 overflow-x-auto border-b border-line bg-surface px-3 py-2 md:h-9 md:flex-nowrap md:py-0">
           {filters}
         </div>
       ) : null}
 
-      <div className={`grid min-h-0 flex-1 ${railOpen ? "grid-cols-[260px_1fr]" : "grid-cols-[0_1fr]"}`}>
-        <aside className={`min-h-0 overflow-y-auto border-r border-line bg-surface ${railOpen ? "" : "hidden"}`}>
+      <div className={`grid min-h-0 min-w-0 flex-1 grid-cols-1 ${railOpen ? "md:grid-cols-[260px_minmax(0,1fr)]" : "md:grid-cols-[0_minmax(0,1fr)]"}`}>
+        <aside className={`max-h-64 min-h-0 overflow-y-auto border-b border-line bg-surface md:max-h-none md:border-b-0 md:border-r ${railOpen ? "" : "hidden"}`}>
           {rail}
         </aside>
-        <main className="min-h-0 overflow-y-auto">{children}</main>
+        <main className="min-h-0 min-w-0 overflow-y-auto">{children}</main>
       </div>
     </div>
   );