Fix: Zoom Issue & Sidebar Overflow

dev.moku.app.yml

@@ -181,7 +181,7 @@ modules:
         path: .
       - type: file
         path: packaging/frontend-dist.tar.gz
-        sha256: 9e9590cf8c98b07ca774382491b1d8cfcc1f2151afadbf8e23e2abda0c086c11
+        sha256: e5b4e81c241bfd6940cea0f4815f36ce0f0260fae7249e90d56926b8cafe8016
       - packaging/cargo-sources.json
       - type: inline
         dest: src-tauri/.cargo

src/App.svelte

@@ -79,7 +79,7 @@
   let platformScale = $state(1.0);
 
   function applyZoom() {
-    const uiZoom     = store.settings.uiZoom ?? 1.5;
+    const uiZoom     = store.settings.uiZoom ?? 1.0;
     const effective  = platformScale * uiZoom;
     const pct        = effective * 100;
     document.documentElement.style.zoom = `${pct}%`;
@@ -282,6 +282,25 @@
     }
   });
 
+  function handleZoomKey(e: KeyboardEvent) {
+    if (!e.ctrlKey) return;
+    if (e.key === "=" || e.key === "+") {
+      e.preventDefault();
+      store.settings.uiZoom = Math.min(2.0, Math.round(((store.settings.uiZoom ?? 1.0) + 0.1) * 10) / 10);
+    } else if (e.key === "-") {
+      e.preventDefault();
+      store.settings.uiZoom = Math.max(0.5, Math.round(((store.settings.uiZoom ?? 1.0) - 0.1) * 10) / 10);
+    } else if (e.key === "0") {
+      e.preventDefault();
+      store.settings.uiZoom = 1.0;
+    }
+  }
+
+  $effect(() => {
+    window.addEventListener("keydown", handleZoomKey);
+    return () => window.removeEventListener("keydown", handleZoomKey);
+  });
+
   function handleRetry() {
     failed        = false;
     notConfigured = false;

src/components/layout/Sidebar.svelte

@@ -50,19 +50,20 @@
 </aside>
 
 <style>
-  .root { width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-void); display: flex; flex-direction: column; align-items: center; padding: var(--sp-4) 0; }
+  .root { width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-void); display: flex; flex-direction: column; align-items: center; padding: var(--sp-4) 0; overflow: hidden; min-height: 0; height: 100%; }
-  .logo { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); background: none; border: none; outline: none; cursor: pointer; border-radius: var(--radius-lg); transition: opacity var(--t-base), transform var(--t-base); padding: 0; appearance: none; -webkit-appearance: none; }
+  .logo { width: 80px; height: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); background: none; border: none; outline: none; cursor: pointer; border-radius: var(--radius-lg); transition: opacity var(--t-base), transform var(--t-base); padding: 0; appearance: none; -webkit-appearance: none; }
   .logo:hover { opacity: 0.8; transform: scale(0.96); }
   .logo:active { transform: scale(0.92); }
   .logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
   .logo-icon { width: 67px; height: 67px; background-color: var(--accent); mask-image: url("../../assets/moku-icon-wordmark.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-image: url("../../assets/moku-icon-wordmark.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; filter: drop-shadow(0 0 8px rgba(107,143,107,0.35)); pointer-events: none; }
-  .nav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: 100%; padding: 0 var(--sp-2); }
+  .nav { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: 100%; padding: 0 var(--sp-2); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
-  .tab { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base); }
+  .nav::-webkit-scrollbar { display: none; }
+  .tab { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base); }
   .tab:hover { color: var(--text-muted); background: var(--bg-raised); }
   .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
   .tab.active { color: var(--accent-fg); background: var(--accent-muted); }
   .tab.active:hover { color: var(--accent-fg); background: var(--accent-muted); }
-  .bottom { display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--border-dim); margin-top: var(--sp-3); }
+  .bottom { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--border-dim); margin-top: var(--sp-3); }
   .settings-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base), transform var(--t-slow); }
   .settings-btn:hover { color: var(--text-muted); background: var(--bg-raised); transform: rotate(30deg); }
   .settings-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

src/components/settings/Settings.svelte

@@ -660,13 +660,13 @@
               <p class="section-title">Interface Scale</p>
               <div class="scale-row">
                 <input type="range" min={50} max={200} step={5}
-                  value={Math.round((store.settings.uiZoom ?? 1.5) * 100)}
+                  value={Math.round((store.settings.uiZoom ?? 0) * 100)}
                   oninput={(e) => updateSettings({ uiZoom: Number(e.currentTarget.value) / 100 })}
                   class="scale-slider" />
                 <input
                   type="number" min={50} max={200} step={1}
                   class="scale-val-input"
-                  value={Math.round((store.settings.uiZoom ?? 1.5) * 100)}
+                  value={Math.round((store.settings.uiZoom ?? 1.0) * 100)}
                   oninput={(e) => {
                     const n = parseInt(e.currentTarget.value, 10);
                     if (!isNaN(n) && n >= 50 && n <= 200) updateSettings({ uiZoom: n / 100 });