fixes in css

static/css/styles.css

@@ -6572,3 +6572,137 @@ dialog::backdrop {
 .form-message.warning {
   color: var(--warning);
 }
+
+/* Keep editor mode/view controls inside the viewport at browser zoom. */
+.control-label-short {
+  display: none;
+}
+
+.pad-page .editor-toolbar,
+.pad-page .toolbar-group,
+.pad-page .view-switch {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.pad-page #mode-toggle,
+.pad-page .view-switch {
+  flex: 0 0 auto;
+}
+
+@media (max-width: 1699px) {
+  .pad-page :is(#mode-toggle, .view-switch) .control-label-full {
+    display: none;
+  }
+
+  .pad-page :is(#mode-toggle, .view-switch) .control-label-short {
+    display: inline;
+  }
+
+  .pad-page #mode-toggle {
+    width: 36px;
+    min-width: 36px;
+    padding-inline: 6px;
+  }
+
+  .pad-page .view-switch button {
+    width: 36px;
+    min-width: 36px;
+    padding-inline: 6px;
+  }
+}
+
+@media (max-width: 760px) {
+  .pad-page .editor-toolbar {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    width: 100%;
+    max-width: 100vw;
+  }
+
+  .pad-page #mode-toggle {
+    display: inline-flex;
+  }
+
+  .pad-page .view-switch button,
+  .pad-page .view-switch button[data-view="split"] {
+    display: inline-flex;
+    width: 34px;
+    min-width: 34px;
+    align-items: center;
+    justify-content: center;
+    padding-inline: 5px;
+  }
+
+  .pad-page .workspace.view-split {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .pad-page .workspace.view-split .preview-column {
+    display: grid;
+    opacity: 1;
+    transform: translateX(0);
+    border-top: 1px solid var(--border);
+  }
+}
+
+/* History content wraps vertically and never creates a horizontal scrollbar. */
+.history-panel {
+  max-width: 100vw;
+  min-width: 0;
+}
+
+.history-list {
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.revision {
+  min-width: 0;
+  grid-template-columns: 12px minmax(0, 1fr);
+}
+
+.revision > div,
+.revision__meta,
+.revision__meta strong,
+.revision time,
+.revision__snippet,
+.revision__preview {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.revision__meta {
+  flex-wrap: wrap;
+}
+
+.revision__meta strong,
+.revision time,
+.revision__snippet,
+.revision__preview {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.revision__snippet {
+  white-space: normal;
+}
+
+.revision__preview {
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+.history-header > div,
+.history-header h2,
+.history-header p,
+.history-help,
+.history-list .empty,
+.history-list .error {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}

static/editor.html

@@ -123,9 +123,15 @@
                     Compact</label><label class="line-toggle"><input id="line-links-toggle" type="checkbox">
                     Line links</label>
                 <div class="toolbar-fill"></div><button id="mode-toggle" class="toolbar-action active"
-                    aria-pressed="true">Markdown</button>
-                <div class="view-switch"><button data-view="edit">Edit</button><button data-view="split"
-                        class="active">Split</button><button data-view="preview">Preview</button></div>
+                    aria-pressed="true" aria-label="Markdown" title="Markdown"><span class="control-label-full">Markdown</span><span
+                        class="control-label-short" aria-hidden="true">M</span></button>
+                <div class="view-switch" aria-label="Editor view"><button data-view="edit" aria-label="Edit" title="Edit"><span
+                            class="control-label-full">Edit</span><span class="control-label-short"
+                            aria-hidden="true">E</span></button><button data-view="split" class="active" aria-label="Split"
+                        title="Split"><span class="control-label-full">Split</span><span class="control-label-short"
+                            aria-hidden="true">S</span></button><button data-view="preview" aria-label="Preview" title="Preview"><span
+                            class="control-label-full">Preview</span><span class="control-label-short"
+                            aria-hidden="true">P</span></button></div>
             </div>
             <div id="connection-notice" class="connection-notice" role="status" aria-live="polite" hidden>
                 <span class="connection-notice__signal"

static/js/note-editor.js

@@ -858,9 +858,13 @@ export function startNoteEditor(adapter) {
       button.setAttribute("aria-pressed", String(active));
     });
     const markdown = uiState.mode === "markdown";
+    const modeName = markdown ? "Markdown" : "Text";
     modeToggle.classList.toggle("active", markdown);
     modeToggle.setAttribute("aria-pressed", String(markdown));
-    modeToggle.textContent = markdown ? "Markdown" : "Text";
+    modeToggle.title = modeName;
+    modeToggle.setAttribute("aria-label", modeName);
+    modeToggle.querySelector(".control-label-full").textContent = modeName;
+    modeToggle.querySelector(".control-label-short").textContent = markdown ? "M" : "T";
     render();
     if (write) writeEditorState(uiState, { replace });
     updateAddressLabel();