Improve mobile editing

assets/style.css

@@ -352,16 +352,24 @@ main > h2 {
 .suggest-path { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.1rem; }
 .suggest-footer > td { color: var(--link); font-size: var(--font-sm); }
 
-/* === Editor toolbar === */
+/* === Editor toolbar ===
+   Single non-wrapping row that scrolls horizontally (swipe on mobile) rather
+   than breaking into stacked rows. A horizontal-scroll container also clips
+   overflow-y, so open dropdown menus are pinned to the viewport via JS
+   (editor/main.js pinMenu) to escape the clip. */
 .editor-toolbar {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: var(--space-1);
     border: var(--border);
     border-bottom: none;
     padding: 0.4rem 0.6rem;
     background: var(--bg-panel-hover);
+    overflow-x: auto;
+    scrollbar-width: none;
 }
+.editor-toolbar::-webkit-scrollbar { display: none; }
+.editor-toolbar > * { flex-shrink: 0; }
 .toolbar-sep {
     width: 1px;
     background: var(--secondary);
@@ -371,6 +379,9 @@ main > h2 {
 
 /* === Edit form === */
 .edit-form { display: flex; flex-direction: column; }
+/* The sidebar is always empty while editing, so drop its grid track instead of
+   leaving a reserved 14rem gap on the right; wide mode then fills the viewport. */
+body.edit-mode .page-wrap { grid-template-columns: minmax(0, 1fr); }
 body.editor-wide .page-wrap { max-width: none; }
 /* CodeMirror mount. The .cm-editor visual treatment (border, bg, font, padding)
    lives in the CM theme (editor-build/entry.js), keyed off the same :root
@@ -675,6 +686,20 @@ aside.sidebar:empty { display: none; }
     main { padding: var(--space-4) var(--space-3); }
     .editor-cm { min-height: 50vh; }
     .sidebar { width: calc(100% - 1.5rem); }
+    /* Editing on mobile is full-bleed: drop the page/main inset so the toolbar
+       and editor use the entire viewport width. */
+    body.edit-mode .page-wrap { padding: 0; gap: 0; }
+    body.edit-mode main { padding: 0; }
+    /* Fingers, not cursors: give every toolbar control a ~44px tap target. */
+    .editor-toolbar { gap: var(--space-2); padding: var(--space-2); }
+    .editor-toolbar .btn-tool {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2.75rem;
+        min-height: 2.75rem;
+        padding: 0 var(--space-2);
+    }
     .modal-backdrop { padding: var(--space-2); align-items: flex-start; }
     .modal { max-width: none; margin-top: var(--space-4); }
     .modal .panel-header { cursor: default; }