From 33eb3d900cc423679ebcd84f2f175dfad49a2f10 Mon Sep 17 00:00:00 2001
From: tomdebone <tomdebone@eifeldude.org>
Date: Tue, 7 Jul 2026 08:06:01 +0200
Subject: [PATCH] fix(tauri-app): wrap html/body/#app in :global() for Svelte 5
 CSS scoping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 crates/tauri-app/src/App.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/crates/tauri-app/src/App.svelte b/crates/tauri-app/src/App.svelte
index e6d9402..588c6b0 100644
--- a/crates/tauri-app/src/App.svelte
+++ b/crates/tauri-app/src/App.svelte
@@ -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;
