feat: collapse the file tree into a drawer on narrow screens

Below the 1100px breakpoint the file tree stacked on top of the diff and
stole vertical space from the core review surface. It now becomes an
off-canvas left drawer, hidden by default so the diff fills the viewport,
sliding in over a dimmed backdrop when opened via the new header hamburger
or the new ⇧B shortcut. Selecting a file (or Esc / backdrop-click) closes it.

Desktop (>1100px) is untouched: the resizable side-by-side tree stays, and
⇧B is an inert no-op there since the drawer styles are media-gated. The
hamburger is also suppressed in single-file / file-mode, which have no tree.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ymansurozer

src/ui/index.html

@@ -271,6 +271,34 @@
       border-radius: var(--radius-sm)
     }
 
+    /* Hamburger that opens the off-canvas file drawer — the topbar's only tree affordance once
+       the tree goes off-canvas. Hidden by default; revealed only under the ≤1100px media query
+       (and re-hidden in single-file / file-mode, which have no tree). */
+    .nav-toggle {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      margin-left: -4px;
+      border: 0;
+      border-radius: var(--radius-sm);
+      background: transparent;
+      color: var(--muted);
+      cursor: pointer
+    }
+
+    .nav-toggle:hover {
+      background: var(--surface-raised);
+      color: var(--ink)
+    }
+
+    /* Scrim behind the open file drawer; CSS-gated to narrow widths (see media query). */
+    .tree-backdrop {
+      display: none
+    }
+
     .actions {
       justify-self: end;
       display: flex;
@@ -427,6 +455,12 @@
       display: inline-flex
     }
 
+    /* No tree exists in these modes (tree is display:none below), so suppress the drawer toggle. */
+    body.single .nav-toggle,
+    body.file-mode .nav-toggle {
+      display: none !important
+    }
+
     .right {
       border-left: 1px solid var(--line)
     }
@@ -2482,35 +2516,61 @@
       margin-left: 4px
     }
 
+    /* Narrow widths: the file tree leaves the flow and becomes an off-canvas left drawer, so the
+       app stays a fixed-height single column with the diff filling it (the core surface owns the
+       screen) — no more tree-on-top page-scroll stacking. The tree is hidden by default and slides
+       in over a dimmed backdrop when opened (hamburger / ⇧B); selecting a file auto-closes it. */
     @media(max-width:1100px) {
-      body {
-        overflow: auto
+      .main {
+        grid-template-columns: minmax(0, 1fr)
       }
 
-      .app {
-        height: auto;
-        min-height: 100%
+      .resizer {
+        display: none
       }
 
-      .main {
-        grid-template-columns: 1fr
+      .nav-toggle {
+        display: inline-flex
       }
 
-      .resizer {
-        display: none
+      .tree {
+        position: fixed;
+        top: 48px;
+        left: 0;
+        bottom: 0;
+        width: min(86vw, 300px);
+        z-index: 30;
+        border-right: 1px solid var(--line);
+        box-shadow: 8px 0 24px rgba(0, 0, 0, .35);
+        transform: translateX(-100%);
+        transition: transform .18s ease
+      }
+
+      .tree.drawer-open {
+        transform: translateX(0)
       }
 
-      .tree,
-      .right {
-        border: 0;
-        border-bottom: 1px solid var(--line)
+      .tree-backdrop.open {
+        display: block;
+        position: fixed;
+        inset: 48px 0 0 0;
+        z-index: 29;
+        background: rgba(0, 0, 0, .5)
       }
 
+      /* Float the comment surfaces over the diff rather than in-flow — an in-flow element would
+         add a row to the now fixed-height single column and clip the diff. */
       .action-pop,
       .composer {
-        position: static;
+        position: fixed;
+        left: 12px;
+        right: 12px;
+        bottom: 12px;
+        top: auto;
         width: auto;
-        margin: 12px
+        max-width: none;
+        margin: 0;
+        z-index: 40
       }
     }
 
@@ -2538,7 +2598,8 @@
 <body>
   <div class="app" x-data>
     <header class="top">
-      <div class="brand"><svg class="brand-logo" aria-hidden="true" viewBox="4 -5 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#hb_f0)"><circle cx="54.0259" cy="55.9741" r="44.0259" fill="#EB5103"/></g><g filter="url(#hb_f1)"><circle cx="72.6284" cy="55.9741" r="44.0259" fill="#EFCA44"/></g><g filter="url(#hb_f2)"><circle cx="64.5923" cy="54.0259" r="44.0259" fill="#FAF6EA"/></g><defs><filter id="hb_f0" x="0.699" y="2.647" width="106.654" height="106.654" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="bg"/><feBlend mode="normal" in="SourceGraphic" in2="bg" result="shape"/><feGaussianBlur stdDeviation="4.6505"/></filter><filter id="hb_f1" x="19.301" y="2.647" width="106.654" height="106.654" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="bg"/><feBlend mode="normal" in="SourceGraphic" in2="bg" result="shape"/><feGaussianBlur stdDeviation="4.6505"/></filter><filter id="hb_f2" x="11.265" y="0.699" width="106.654" height="106.654" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="bg"/><feBlend mode="normal" in="SourceGraphic" in2="bg" result="shape"/><feGaussianBlur stdDeviation="4.6505"/></filter></defs></svg><span>Galley</span></div>
+      <div class="brand"><button class="nav-toggle" data-tip="Files (⇧B)" aria-label="Toggle file tree"
+          @click="$store.g.treeDrawerOpen = !$store.g.treeDrawerOpen"><svg class="ic" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 4h12M2 8h12M2 12h12"/></svg></button><svg class="brand-logo" aria-hidden="true" viewBox="4 -5 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#hb_f0)"><circle cx="54.0259" cy="55.9741" r="44.0259" fill="#EB5103"/></g><g filter="url(#hb_f1)"><circle cx="72.6284" cy="55.9741" r="44.0259" fill="#EFCA44"/></g><g filter="url(#hb_f2)"><circle cx="64.5923" cy="54.0259" r="44.0259" fill="#FAF6EA"/></g><defs><filter id="hb_f0" x="0.699" y="2.647" width="106.654" height="106.654" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="bg"/><feBlend mode="normal" in="SourceGraphic" in2="bg" result="shape"/><feGaussianBlur stdDeviation="4.6505"/></filter><filter id="hb_f1" x="19.301" y="2.647" width="106.654" height="106.654" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="bg"/><feBlend mode="normal" in="SourceGraphic" in2="bg" result="shape"/><feGaussianBlur stdDeviation="4.6505"/></filter><filter id="hb_f2" x="11.265" y="0.699" width="106.654" height="106.654" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="bg"/><feBlend mode="normal" in="SourceGraphic" in2="bg" result="shape"/><feGaussianBlur stdDeviation="4.6505"/></filter></defs></svg><span>Galley</span></div>
       <div class="toggles">
         <div class="toggle" x-show="$store.g.isMarkdownFile()" data-tip="Rendered / source (m)"><button :class="{active: $store.g.fileView==='rendered'}"
             @click="$store.g.setFileView('rendered')">Rendered</button><button
@@ -2555,7 +2616,7 @@
       <div class="top-progress" id="progressStrip" style="display:none"><i id="progressFill"></i></div>
     </header>
     <main class="main">
-      <aside class="tree">
+      <aside class="tree" :class="{'drawer-open': $store.g.treeDrawerOpen}">
         <div class="tree-tabs" x-show="$store.g.hasGuide && $store.g.hasGuide()" x-cloak>
           <!-- The w hint sits on the INACTIVE tab — the one pressing w switches to. -->
           <button :class="{active: $store.g.sidebarTab==='tree'}" @click="$store.g.sidebarTab='tree'">Tree <kbd x-show="$store.g.sidebarTab!=='tree'">w</kbd></button>
@@ -2605,6 +2666,8 @@
         </div>
         <button class="tree-settings" @click="$store.g.openSettings()"><svg class="ic"><use href="#gly-settings"></use></svg><span>Settings</span><kbd>⇧,</kbd></button>
       </aside>
+      <!-- Narrow-width only (CSS-gated): dims the diff behind the open file drawer; tap to close. -->
+      <div class="tree-backdrop" :class="{open: $store.g.treeDrawerOpen}" @click="$store.g.treeDrawerOpen=false"></div>
       <div class="resizer" data-resize="left"></div>
       <section class="center">
         <div class="guidebar" x-show="$store.g.showGuideBar && $store.g.showGuideBar()" x-cloak>

src/ui/keys.ts

@@ -74,7 +74,11 @@ function escape() {
     S.composerOpen = false;
     S.popoverOpen = false;
     S.editingCommentId = null;
+    return;
   }
+  // Lowest priority: the narrow-width file drawer. Closes only once every transient surface
+  // above it is gone, so Esc dismisses a composer/modal opened over the drawer first.
+  if (S.treeDrawerOpen) S.treeDrawerOpen = false;
 }
 
 // Stage a destructive action behind a confirm dialog (Enter confirms, Esc cancels).
@@ -323,6 +327,15 @@ const HOTKEYS: Hotkey[] = [
     test: k("w"),
     run: () => (S.sidebarTab = S.sidebarTab === "tree" ? "walkthrough" : "tree"),
   },
+  {
+    combo: "⇧B",
+    desc: "Files drawer (narrow screens)",
+    group: "View",
+    when: navigable,
+    test: shift("B"),
+    // Toggles the off-canvas file tree at narrow widths; inert on desktop (drawer is media-gated).
+    run: () => (S.treeDrawerOpen = !S.treeDrawerOpen),
+  },
   {
     combo: "⇧E",
     desc: "Open in editor",

src/ui/main.ts

@@ -79,6 +79,9 @@ S.treeRows = treeRows;
 // which shows the "Rendering…" indicator only for a cold open of a big file.
 S.selectFile = (i) => {
   if (i < 0 || !S.state.files[i]) return; // ignore out-of-range selections
+  // Narrow-width drawer: opening a file is the drawer's whole purpose, so get it out of the
+  // way. The single funnel for tree/walkthrough clicks + next/prev + guide nav; no-op when shut.
+  S.treeDrawerOpen = false;
   S.overviewOpen = false;
   S.preview = null;
   S.fileIndex = i;

src/ui/store.ts

@@ -41,6 +41,7 @@ export const S: Store = Alpine.reactive<Store>({
   sendNote: "",
   overviewOpen: false,
   sidebarTab: "tree",
+  treeDrawerOpen: false,
   fileView: "rendered",
 });
 

src/ui/types.ts

@@ -197,6 +197,10 @@ export interface Store {
   // Which sidebar pane is showing when a guide is attached (no guide → tabs hidden, tree
   // only). Per-session like overviewOpen; settings.sidebarDefault seeds it at init.
   sidebarTab: "tree" | "walkthrough";
+  // Narrow widths (≤1100px): the file tree is an off-canvas left drawer, hidden by default so
+  // the diff owns the screen. Toggled by the header hamburger / ⇧B; auto-closed on file select.
+  // Inert on desktop — the drawer styles are media-gated, so the tree stays side-by-side there.
+  treeDrawerOpen: boolean;
   // file mode: how a markdown file is shown — "rendered" (comark/markdown-it preview,
   // comment on blocks) or "source" (@pierre/diffs raw/diff).
   fileView: "rendered" | "source";