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:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user