fix(tauri-app): make html/body/#app flex column for layout

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.
This commit is contained in:
tomdebone
2026-07-07 07:36:06 +02:00
parent 0fbae97306
commit 2558113235
+24 -6
View File
@@ -551,19 +551,37 @@
{/if} {/if}
<style> <style>
/* The whole page is a flex column: 30px title bar on top, then the /* The whole page is a flex column filling the viewport. The
rest of the content. The title bar is the only drag region; the shell is grid-laid-out with NavRail | main + statusbar. The
rest is clickable thanks to Tauri's drag.js clickable-element main area is overflow:auto so long timelines scroll
check. */ 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 { .login-wrap {
flex: 1; flex: 1 1 auto;
display: grid; display: grid;
place-items: center; place-items: center;
min-height: 0; min-height: 0;
} }
.shell { .shell {
flex: 1; flex: 1 1 auto;
display: grid; display: grid;
grid-template-rows: 1fr 24px; grid-template-rows: 1fr 24px;
grid-template-columns: 88px 1fr; grid-template-columns: 88px 1fr;