diff --git a/web/src/App.svelte b/web/src/App.svelte
index e66cb34..3254ccb 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -436,7 +436,7 @@
     flex: 1;
     min-height: 0;
     display: grid;
-    grid-template-columns: minmax(28ch, 34ch) 1fr;
+    grid-template-columns: minmax(30ch, 22vw) 1fr;
   }
 
   .panes.board { grid-template-columns: 1fr; }
diff --git a/web/src/lib/DocumentPane.svelte b/web/src/lib/DocumentPane.svelte
index 0b236a1..00e2eb1 100644
--- a/web/src/lib/DocumentPane.svelte
+++ b/web/src/lib/DocumentPane.svelte
@@ -66,32 +66,37 @@
 
 <section class="pane">
   <header>
-    <div class="meta">
+    <div class="crumb" title="{workspace.here}/{doc.slug}">
       <span class="accent">{workspace.here}/{doc.slug}</span>
-      <span class="faint">{formatStamp(workspace.draft.created_at)} {formatWeekday(workspace.draft.created_at)}</span>
-      <span class="faint">·</span>
-      <span class="faint">edited {relative(doc.updated_at)}</span>
-      <span class="faint">·</span>
-      <span class="faint">{words} words</span>
       {#if workspace.dirty}<span class="warn">[+]</span>{/if}
     </div>
 
-    <div class="actions">
-      {#if isTouchDevice}
-        <button onclick={() => runCommand('q')}>← list</button>
-      {/if}
-      {#if workspace.editing}
-        <button onclick={() => runCommand('w')}>:w</button>
-        <button onclick={() => runCommand('upload')}>attach</button>
-        <button onclick={() => runCommand('wq')}>done</button>
-      {:else}
-        <button onclick={() => runCommand('e')}>edit</button>
-      {/if}
-      <button class:on={doc.shared} onclick={() => runCommand(doc.shared ? 'unshare' : 'share')}>
-        {doc.shared ? 'unshare' : 'share'}
-      </button>
-      <button onclick={() => runCommand('d')}>delete</button>
-      <button onclick={() => runCommand('q')}>close</button>
+    <div class="row">
+      <div class="meta">
+        <span class="faint">{formatStamp(workspace.draft.created_at)} {formatWeekday(workspace.draft.created_at)}</span>
+        <span class="faint">·</span>
+        <span class="faint">edited {relative(doc.updated_at)}</span>
+        <span class="faint">·</span>
+        <span class="faint">{words} words</span>
+      </div>
+
+      <div class="actions">
+        {#if isTouchDevice}
+          <button onclick={() => runCommand('q')}>← list</button>
+        {/if}
+        {#if workspace.editing}
+          <button onclick={() => runCommand('w')}>:w</button>
+          <button onclick={() => runCommand('upload')}>attach</button>
+          <button onclick={() => runCommand('wq')}>done</button>
+        {:else}
+          <button onclick={() => runCommand('e')}>edit</button>
+        {/if}
+        <button class:on={doc.shared} onclick={() => runCommand(doc.shared ? 'unshare' : 'share')}>
+          {doc.shared ? 'unshare' : 'share'}
+        </button>
+        <button onclick={() => runCommand('d')}>delete</button>
+        <button onclick={() => runCommand('q')}>close</button>
+      </div>
     </div>
   </header>
 
@@ -158,18 +163,34 @@
 
   header {
     display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
+    gap: 4px;
     padding: 6px 12px;
     border-bottom: 1px solid var(--line);
     flex: none;
   }
 
-  .meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
-  .warn { color: var(--warn); }
-  .actions { display: flex; gap: 4px; flex-wrap: wrap; }
+  .crumb {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  .meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; min-width: 0; }
+  .warn { color: var(--warn); flex: none; }
+  .actions { display: flex; gap: 4px; flex-wrap: wrap; flex: none; }
   .actions .on { color: var(--accent); border-color: var(--accent-dim); }
 
   .sharebar {
diff --git a/web/src/lib/Sidebar.svelte b/web/src/lib/Sidebar.svelte
index a1527a9..82113c5 100644
--- a/web/src/lib/Sidebar.svelte
+++ b/web/src/lib/Sidebar.svelte
@@ -165,9 +165,13 @@
   .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   /* The count is short and fixed-width-ish; the space name is the part that
      can give way when the sidebar is narrow. */
-  .count { flex: none; white-space: nowrap; }
-  .tools { display: flex; gap: 2px; flex: none; }
-  .tools button { padding: 0 6px; line-height: 18px; }
+  .count { flex: none; white-space: nowrap; display: none; }
+  .tools { display: flex; gap: 1px; flex: none; }
+  .tools button { padding: 0 5px; line-height: 18px; }
+
+  @media (min-width: 480px) {
+    .count { display: inline; }
+  }
   .tools .board { color: var(--accent); }
   .tools .board.faint { color: var(--fg-faint); }