tomdebone/maarcadetweet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/tauri-app/src/App.svelte
+24 -6
View File
@@ -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;