From 255811323598575d47180a9fc843d61287c3c11a Mon Sep 17 00:00:00 2001
From: tomdebone <tomdebone@eifeldude.org>
Date: Tue, 7 Jul 2026 07:36:06 +0200
Subject: [PATCH] fix(tauri-app): make html/body/#app flex column for layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The CSS-Layout was broken: `html, body, #app` had
`height: 100%; overflow: hidden` but NO `display: flex`.
The shell has `flex: 1` which only works when the parent is
a flex container, so the shell collapsed to its content
height and `.main { overflow: auto }` had no scroll
target. The user reported 'kann nicht scrollen nix anklicken
etc.' even after the previous click-bug fixes — clicks
were registered but the visible area was just the natural
content height of the shell, so there was nothing to scroll
and a large area of the viewport was blank.

Fix: make html/body a flex column (`display: flex;
flex-direction: column; height: 100%`) so the shell's
`flex: 1` actually takes the full viewport, and let
the inner shell's grid + main's overflow:auto work as
designed. Also added `#app` as a flex child for the
case where body height comes from the tauri webview's
document element instead of the html element.

This is a structural CSS fix — no Svelte or component
changes. The dev-server / Vite / NavRail issues from
previous commits are independent and remain fixed.
---
 crates/tauri-app/src/App.svelte | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

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;