ui fixes

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; }

web/src/lib/DocumentPane.svelte

@@ -66,14 +66,18 @@
 
 <section class="pane">
   <header>
-    <div class="meta">
+    <div class="crumb" title="{workspace.here}/{doc.slug}">
       <span class="accent">{workspace.here}/{doc.slug}</span>
+      {#if workspace.dirty}<span class="warn">[+]</span>{/if}
+    </div>
+
+    <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>
-      {#if workspace.dirty}<span class="warn">[+]</span>{/if}
       </div>
 
       <div class="actions">
@@ -93,6 +97,7 @@
         <button onclick={() => runCommand('d')}>delete</button>
         <button onclick={() => runCommand('q')}>close</button>
       </div>
+    </div>
   </header>
 
   {#if sharePath}
@@ -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 {

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); }