diff --git a/crates/tauri-app/src/App.svelte b/crates/tauri-app/src/App.svelte
index f820e07..e6d9402 100644
--- a/crates/tauri-app/src/App.svelte
+++ b/crates/tauri-app/src/App.svelte
@@ -551,19 +551,37 @@
 {/if}
 
 <style>
-  /* The whole page is a flex column: 30px title bar on top, then the
-     rest of the content. The title bar is the only drag region; the
-     rest is clickable thanks to Tauri's drag.js clickable-element
-     check. */
+  /* The whole page is a flex column filling the viewport. The
+     shell is grid-laid-out with NavRail | main + statusbar. The
+     main area is overflow:auto so long timelines scroll
+     inside the main area, while the statusbar stays pinned at the
+     bottom. With this layout the body is `flex: 1` child of the
+     global html/body flex container, so the shell fills the
+     viewport regardless of how much content is in it. Without
+     this, the shell collapses to its content height (because
+     `flex: 1` requires a flex parent) and the main area has no
+     scroll target — clicks still work but you cannot scroll. */
+  html, body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  #app {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
   .login-wrap {
-    flex: 1;
+    flex: 1 1 auto;
     display: grid;
     place-items: center;
     min-height: 0;
   }
 
   .shell {
-    flex: 1;
+    flex: 1 1 auto;
     display: grid;
     grid-template-rows: 1fr 24px;
     grid-template-columns: 88px 1fr;