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

fix(tauri-app): wrap html/body/#app in :global() for Svelte 5 CSS scoping

Browse Source 
Svelte 5's <style> block scopes selectors to elements with the
component's hash class (e.g. body.svelte-1n46o8q). The actual
<html>, <body>, and <div id="app"> are OUTSIDE the component
(no svelte class), so the rules targeting them silently don't
match anything. The previous CSS-layout fix at 2558113 added
"html, body { display: flex; ... }" but it was scoped — body
was not a flex container, the shell collapsed to its content
height, and the viewport went blank (user reported 'die app
zeigt nur eine weisse seite').

Wrap the body/HTML rules in :global() so they target the
actual document elements. Add :global(#app) too so the
Svelte root mounts into a flex column. After the fix the
bundled CSS contains:
  body { display: flex; flex-direction: column; height: 100% }
  #app { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0 }

and the shell finally fills the viewport.

All other CSS in the file targets elements inside the
component template (login-wrap, shell, main, etc.) and was
already correctly auto-scoped by Svelte.
This commit is contained in:
tomdebone
2026-07-07 08:06:01 +02:00
parent 2558113235
commit 33eb3d900c
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/tauri-app/src/App.svelte
+7 -2
View File
@@ -561,12 +561,17 @@
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 {
/* :global() escapes Svelte's CSS scoping so the rules below
target the actual <html> and <body> elements, not just
elements with the Svelte component class. Without this, the
flex layout was silently a no-op and the shell collapsed to
its content height, leaving the viewport blank. */
:global(html), :global(body) {
display: flex;
flex-direction: column;
height: 100%;
}
#app {
:global(#app) {
display: flex;
flex-direction: column;
flex: 1 1 auto;