mobile CSS

static/app.css

@@ -230,6 +230,27 @@ body {
 .topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
 .user-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); }
 
+.menu-toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  width: 44px;
+  height: 44px;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  cursor: pointer;
+}
+.menu-toggle span {
+  display: block;
+  height: 2px;
+  width: 100%;
+  background: var(--text);
+  border-radius: 2px;
+}
+
 .btn {
   padding: 8px 14px;
   border: 1px solid var(--border);
@@ -497,15 +518,39 @@ body {
 }
 .hidden { display: none !important; }
 
+/* Prevent wide content (tables, code, long words) from blowing out the layout */
+.col-main, .col-side, .editor, .preview { min-width: 0; }
+.note-snippet, .preview, .editor { overflow-wrap: break-word; }
+pre { white-space: pre-wrap; word-break: break-word; }
+.preview table, .note-snippet table { display: block; max-width: 100%; overflow-x: auto; }
+.note-snippet img, .preview img, .editor img { max-width: 100%; height: auto; }
+
 @media (max-width: 720px) {
   .layout { grid-template-columns: 1fr; gap: 12px; margin: 12px auto; padding: 0 12px; }
 
   .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
   .brand-logo { height: 44px; }
   .brand { font-size: 16px; }
+  .menu-toggle { display: flex; margin-left: auto; }
   .search { max-width: none; order: 3; flex-basis: 100%; font-size: 16px; }
-  .topbar-right { margin-left: auto; gap: 6px; flex-wrap: wrap; }
+  .topbar-right {
-  .topbar-right .btn { padding: 8px 12px; }
+    order: 4;
+    flex-basis: 100%;
+    margin-left: 0;
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 10px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+  }
+  .topbar-right.open { display: flex; }
+  .topbar-right .btn { padding: 10px 12px; width: 100%; text-align: left; }
+  .topbar-right .user-select { width: 100%; padding: 10px; font-size: 15px; }
+  .topbar-right .theme-selector { width: 100%; }
+  .topbar-right .theme-btn { width: 100%; justify-content: space-between; padding: 10px 12px; }
 
   .editor-wrap, .help-card, .tools-row { padding: 0 12px; }
   .editor-wrap { margin: 12px auto; }
@@ -544,4 +589,5 @@ body {
 
   .help-table { font-size: 13px; }
   .help-table th, .help-table td { padding: 6px 8px; }
+  .help-table code { white-space: normal; word-break: break-word; }
 }

static/app.js

@@ -189,18 +189,23 @@ async function doLogin() {
 }
 
 function header() {
+  const menu = el("div", { class: "topbar-right", id: "mobile-menu" }, [
+    el("select", { id: "user-select", class: "user-select", onchange: onUserChange }),
+    el("button", { class: "btn primary", text: "+ New note", onclick: () => openNote(null) }),
+    el("button", { class: "btn ghost", text: "Help", onclick: showHelp }),
+    el("button", { class: "btn ghost", text: "quickSnote", onclick: showTools }),
+    themeSelector(),
+  ]);
+  const burger = el("button", { class: "menu-toggle", title: "Menu", "aria-label": "Menu", onclick: () => menu.classList.toggle("open") }, [
+    el("span", {}), el("span", {}), el("span", {}),
+  ]);
   return el("header", { class: "topbar" }, [
     el("div", { class: "brand" }, [
       el("img", { src: "/static/snotes-logo.png", class: "brand-logo", alt: "snotes" }),
     ]),
+    burger,
     el("input", { id: "search", class: "search", type: "search", placeholder: "Search notes…", oninput: debounce(onSearch, 250) }),
-    el("div", { class: "topbar-right" }, [
+    menu,
-      el("select", { id: "user-select", class: "user-select", onchange: onUserChange }),
-      el("button", { class: "btn primary", text: "+ New note", onclick: () => openNote(null) }),
-      el("button", { class: "btn ghost", text: "Help", onclick: showHelp }),
-      el("button", { class: "btn ghost", text: "quickSnote", onclick: showTools }),
-      themeSelector(),
-    ]),
   ]);
 }