feat: localize config and fix mobile viewport

client/html/index.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta
-            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content"
+            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content"
             name="viewport"
         />
         <base href="{{ host_prefix | safe }}/" />

client/styles/plainleaf_workspace.scss

@@ -26,6 +26,7 @@
   background: var(--pl-canvas);
   font-family: var(--ui-font);
   letter-spacing: 0;
+  overflow: hidden;
 }
 
 html[data-theme="dark"] #pl-workspace-shell {
@@ -835,11 +836,16 @@ button.pl-setting-row:hover {
   min-height: 0;
   color: var(--pl-text);
   background: var(--pl-surface);
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 .pl-home-inner {
+  box-sizing: border-box;
   width: min(100%, 920px);
+  max-width: 100%;
   margin: 0 auto;
   padding: 48px 80px 90px;
 }
@@ -902,6 +908,12 @@ button.pl-setting-row:hover {
   border-radius: 7px;
 }
 
+.pl-home-actions > button > span:last-child,
+.pl-home-grid > section,
+.pl-settings-main-row > span:first-child {
+  min-width: 0;
+}
+
 .pl-home-actions .is-green { color: var(--pl-green); background: var(--pl-green-soft); }
 .pl-home-actions .is-coral { color: var(--pl-coral); background: var(--pl-coral-soft); }
 .pl-home-actions .is-blue { color: var(--pl-blue); background: var(--pl-blue-soft); }
@@ -911,6 +923,7 @@ button.pl-setting-row:hover {
 .pl-home-task strong,
 .pl-home-task small {
   display: block;
+  min-width: 0;
 }
 
 .pl-home-actions strong {
@@ -991,6 +1004,10 @@ button.pl-setting-row:hover {
 
 .pl-home-recent span {
   grid-column: 1 / -1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .pl-home-task {
@@ -1032,7 +1049,9 @@ button.pl-setting-row:hover {
 }
 
 .pl-settings-inner {
+  box-sizing: border-box;
   width: min(100%, 820px);
+  max-width: 100%;
   margin: 0 auto;
   padding: 48px 80px 90px;
 }
@@ -1075,8 +1094,10 @@ button.pl-setting-row:hover {
 
 .pl-settings-main-row small {
   margin-top: 3px;
+  overflow: hidden;
   color: var(--pl-faint);
   font-size: 11px;
+  text-overflow: ellipsis;
 }
 
 .pl-settings-main-row > button {
@@ -1148,7 +1169,9 @@ button.pl-setting-row:hover {
 }
 
 .pl-new-note-dialog {
+  box-sizing: border-box;
   width: min(440px, calc(100vw - 32px));
+  max-width: 100%;
   padding: 18px;
   border: 1px solid var(--pl-border);
   border-radius: 8px;
@@ -1290,7 +1313,12 @@ button.pl-setting-row:hover {
   #pl-workspace-shell {
     display: block;
     box-sizing: border-box;
-    padding-bottom: calc(62px + env(safe-area-inset-bottom));
+    width: 100%;
+    max-width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    padding-bottom: 0;
+    overflow: hidden;
   }
 
   .pl-sidebar {
@@ -1331,7 +1359,10 @@ button.pl-setting-row:hover {
 
   .pl-editor-workspace {
     width: 100%;
+    max-width: 100vw;
     height: calc(100vh - 62px - env(safe-area-inset-bottom));
+    height: calc(100dvh - 62px - env(safe-area-inset-bottom));
+    overflow: hidden;
   }
 
   .pl-mobile-menu-button {
@@ -1357,6 +1388,7 @@ button.pl-setting-row:hover {
   .pl-home-inner,
   .pl-settings-inner {
     width: 100%;
+    max-width: 100%;
     padding: 54px 22px 70px;
   }
 
@@ -1397,6 +1429,9 @@ button.pl-setting-row:hover {
     right: 0;
     bottom: 0;
     left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100vw;
     height: calc(62px + env(safe-area-inset-bottom));
     padding: 4px 6px env(safe-area-inset-bottom);
     border-top: 1px solid var(--pl-border);
@@ -1437,6 +1472,7 @@ button.pl-setting-row:hover {
 
   .pl-new-note-dialog {
     width: 100%;
+    max-width: 100vw;
     padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
     border-right: 0;
     border-bottom: 0;

client/styles/plainleaf_workspace.test.ts

@@ -0,0 +1,31 @@
+import { readFileSync } from "node:fs";
+import { expect, test } from "vitest";
+
+const workspaceStyles = readFileSync(
+  new URL("./plainleaf_workspace.scss", import.meta.url),
+  "utf8",
+);
+const clientHtml = readFileSync(
+  new URL("../html/index.html", import.meta.url),
+  "utf8",
+);
+
+test("keeps mobile workspace within the dynamic viewport", () => {
+  expect(workspaceStyles).toContain("height: 100dvh;");
+  expect(workspaceStyles).toContain(
+    "height: calc(100dvh - 62px - env(safe-area-inset-bottom));",
+  );
+  expect(clientHtml).toContain("viewport-fit=cover");
+});
+
+test("uses internal vertical scrolling without widening the page", () => {
+  expect(workspaceStyles).toMatch(
+    /\.pl-home-surface,\s*\.pl-settings-surface\s*\{[^}]*overflow-x: hidden;[^}]*overflow-y: auto;/s,
+  );
+  expect(workspaceStyles).toMatch(
+    /\.pl-home-inner\s*\{[^}]*box-sizing: border-box;[^}]*max-width: 100%;/s,
+  );
+  expect(workspaceStyles).toMatch(
+    /\.pl-settings-inner\s*\{[^}]*box-sizing: border-box;[^}]*max-width: 100%;/s,
+  );
+});