fix scroll bars

Author: stringhandler

src-tauri/capabilities/default.json

@@ -10,6 +10,7 @@
     "core:window:allow-minimize",
     "core:window:allow-toggle-maximize",
     "core:window:allow-close",
-    "core:window:allow-start-dragging"
+    "core:window:allow-start-dragging",
+    "core:window:allow-start-resize-dragging"
   ]
 }

src/app.css

@@ -27,12 +27,16 @@
   padding: 0;
 }
 
-html, body {
+html {
   height: 100%;
   overflow: hidden;
 }
 
 body {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   font-family: 'Barlow', 'Trebuchet MS', Arial, sans-serif;
   font-weight: 400;
   background: var(--bg-base);
@@ -44,7 +48,8 @@ body {
 }
 
 #svelte {
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;

src/lib/WindowResize.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { getCurrentWindow } from '@tauri-apps/api/window';
+
+  const appWindow = getCurrentWindow();
+
+  async function startResize(direction) {
+    await appWindow.startResizeDragging(direction);
+  }
+</script>
+
+<!-- Invisible resize handles around the window perimeter -->
+<div class="resize-n"   onmousedown={() => startResize('North')}></div>
+<div class="resize-s"   onmousedown={() => startResize('South')}></div>
+<div class="resize-e"   onmousedown={() => startResize('East')}></div>
+<div class="resize-w"   onmousedown={() => startResize('West')}></div>
+<div class="resize-nw"  onmousedown={() => startResize('NorthWest')}></div>
+<div class="resize-ne"  onmousedown={() => startResize('NorthEast')}></div>
+<div class="resize-sw"  onmousedown={() => startResize('SouthWest')}></div>
+<div class="resize-se"  onmousedown={() => startResize('SouthEast')}></div>
+
+<style>
+  /* All handles are fixed-position, zero-size in the non-resize axis,
+     and sit on top of everything via z-index. */
+  div[class^="resize-"] {
+    position: fixed;
+    z-index: 9999;
+  }
+
+  /* Edges */
+  .resize-n  { top: 0; left: 4px; right: 4px; height: 4px; cursor: n-resize; }
+  .resize-s  { bottom: 0; left: 4px; right: 4px; height: 4px; cursor: s-resize; }
+  .resize-e  { right: 0; top: 4px; bottom: 4px; width: 4px; cursor: e-resize; }
+  .resize-w  { left: 0; top: 4px; bottom: 4px; width: 4px; cursor: w-resize; }
+
+  /* Corners */
+  .resize-nw { top: 0; left: 0; width: 8px; height: 8px; cursor: nw-resize; }
+  .resize-ne { top: 0; right: 0; width: 8px; height: 8px; cursor: ne-resize; }
+  .resize-sw { bottom: 0; left: 0; width: 8px; height: 8px; cursor: sw-resize; }
+  .resize-se { bottom: 0; right: 0; width: 8px; height: 8px; cursor: se-resize; }
+</style>

src/routes/+layout.svelte

@@ -8,6 +8,7 @@
   import { getAnalyticsConsent, identifyUser } from "$lib/analytics.js";
   import AnalyticsConsentModal from "$lib/AnalyticsConsentModal.svelte";
   import TitleBar from "$lib/TitleBar.svelte";
+  import WindowResize from "$lib/WindowResize.svelte";
   import '../app.css';
 
   let isLoading = $state(true);
@@ -137,6 +138,7 @@
   }
 </script>
 
+<WindowResize />
 <TitleBar />
 
 {#if isLoading}
@@ -348,6 +350,7 @@
   .app-layout {
     display: flex;
     flex: 1;
+    min-height: 0;
     overflow: hidden;
     background: var(--bg-base);
   }
@@ -546,6 +549,7 @@
   /* ── MAIN AREA ── */
   .main {
     flex: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -600,6 +604,7 @@
   /* ── CONTENT AREA ── */
   .content-area {
     flex: 1;
+    min-height: 0;
     overflow-y: auto;
     padding: 28px 32px;
     scrollbar-width: thin;