From 491c71e2b885b0a76c7798b6933509860fbdebb7 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 25 Mar 2026 15:08:34 +0100
Subject: [PATCH] fix(onboarding): move modal outside flex layout containers in
 8 apps

The MiniOnboardingModal was nested inside .layout-container (flex) divs
in Chat, Clock, Contacts, Context, ManaDeck, Picture, Presi, and Todo.
This could interfere with fixed positioning, causing the modal to render
incorrectly. Moved all modals to the same nesting level as
SessionExpiredBanner, outside layout containers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/routes/(protected)/+layout.svelte    | 11 ++++++-----
 apps/clock/apps/web/src/routes/(app)/+layout.svelte   | 11 ++++++-----
 .../contacts/apps/web/src/routes/(app)/+layout.svelte | 11 ++++++-----
 apps/context/apps/web/src/routes/(app)/+layout.svelte | 10 +++++-----
 .../manadeck/apps/web/src/routes/(app)/+layout.svelte | 10 +++++-----
 apps/picture/apps/web/src/routes/app/+layout.svelte   | 11 ++++++-----
 apps/presi/apps/web/src/routes/(app)/+layout.svelte   | 10 +++++-----
 apps/todo/apps/web/src/routes/(app)/+layout.svelte    | 10 ++++++----
 8 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
index eb8777638..23425b5f6 100644
--- a/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/+layout.svelte
@@ -216,12 +216,13 @@
 				</div>
 			{/if}
 		</main>
-
-		<!-- Onboarding Modal -->
-		{#if chatOnboarding.shouldShow}
-			<MiniOnboardingModal store={chatOnboarding} appName="Chat" appEmoji="💬" />
-		{/if}
 	</div>
+
+	<!-- Onboarding Modal -->
+	{#if chatOnboarding.shouldShow}
+		<MiniOnboardingModal store={chatOnboarding} appName="Chat" appEmoji="💬" />
+	{/if}
+
 	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 </AuthGate>
 
diff --git a/apps/clock/apps/web/src/routes/(app)/+layout.svelte b/apps/clock/apps/web/src/routes/(app)/+layout.svelte
index 673cddd3a..e2678a31a 100644
--- a/apps/clock/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/clock/apps/web/src/routes/(app)/+layout.svelte
@@ -310,12 +310,13 @@
 			emptyText="Keine Ergebnisse"
 			searchingText="Suche..."
 		/>
-
-		<!-- Onboarding Modal -->
-		{#if clockOnboarding.shouldShow}
-			<MiniOnboardingModal store={clockOnboarding} appName="Uhr" appEmoji="⏰" />
-		{/if}
 	</div>
+
+	<!-- Onboarding Modal -->
+	{#if clockOnboarding.shouldShow}
+		<MiniOnboardingModal store={clockOnboarding} appName="Uhr" appEmoji="⏰" />
+	{/if}
+
 	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 </AuthGate>
 
diff --git a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
index 3b38edc25..6cc1f9755 100644
--- a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
@@ -384,13 +384,14 @@
 			{#if newContactModalStore.isOpen}
 				<NewContactModal onClose={() => newContactModalStore.close()} />
 			{/if}
-
-			<!-- Onboarding Modal -->
-			{#if contactsOnboarding.shouldShow}
-				<MiniOnboardingModal store={contactsOnboarding} appName="Kontakte" appEmoji="👥" />
-			{/if}
 		</div>
 	</SplitPaneContainer>
+
+	<!-- Onboarding Modal -->
+	{#if contactsOnboarding.shouldShow}
+		<MiniOnboardingModal store={contactsOnboarding} appName="Kontakte" appEmoji="👥" />
+	{/if}
+
 	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 </AuthGate>
 
diff --git a/apps/context/apps/web/src/routes/(app)/+layout.svelte b/apps/context/apps/web/src/routes/(app)/+layout.svelte
index 3778b1cc9..f6e9f31c3 100644
--- a/apps/context/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/context/apps/web/src/routes/(app)/+layout.svelte
@@ -268,13 +268,13 @@
 		emptyText="Keine Ergebnisse"
 		searchingText="Suche..."
 	/>
-
-	<!-- Onboarding Modal -->
-	{#if contextOnboarding.shouldShow}
-		<MiniOnboardingModal store={contextOnboarding} appName="Context" appEmoji="📄" />
-	{/if}
 </div>
 
+<!-- Onboarding Modal -->
+{#if contextOnboarding.shouldShow}
+	<MiniOnboardingModal store={contextOnboarding} appName="Context" appEmoji="📄" />
+{/if}
+
 <style>
 	.layout-container {
 		display: flex;
diff --git a/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte b/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
index e2e71a71e..2f6c767de 100644
--- a/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manadeck/apps/web/src/routes/(app)/+layout.svelte
@@ -245,10 +245,10 @@
 				{@render children()}
 			</div>
 		</main>
-
-		<!-- Onboarding Modal -->
-		{#if manadeckOnboarding.shouldShow}
-			<MiniOnboardingModal store={manadeckOnboarding} appName="ManaDeck" appEmoji="🃏" />
-		{/if}
 	</div>
+
+	<!-- Onboarding Modal -->
+	{#if manadeckOnboarding.shouldShow}
+		<MiniOnboardingModal store={manadeckOnboarding} appName="ManaDeck" appEmoji="🃏" />
+	{/if}
 {/if}
diff --git a/apps/picture/apps/web/src/routes/app/+layout.svelte b/apps/picture/apps/web/src/routes/app/+layout.svelte
index 48de722ba..134b13ba3 100644
--- a/apps/picture/apps/web/src/routes/app/+layout.svelte
+++ b/apps/picture/apps/web/src/routes/app/+layout.svelte
@@ -270,12 +270,13 @@
 
 		<!-- Keyboard Shortcuts Modal -->
 		<KeyboardShortcutsModal />
-
-		<!-- Onboarding Modal -->
-		{#if pictureOnboarding.shouldShow}
-			<MiniOnboardingModal store={pictureOnboarding} appName="Picture" appEmoji="🎨" />
-		{/if}
 	</div>
+
+	<!-- Onboarding Modal -->
+	{#if pictureOnboarding.shouldShow}
+		<MiniOnboardingModal store={pictureOnboarding} appName="Picture" appEmoji="🎨" />
+	{/if}
+
 	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/auth/login" />
 </AuthGate>
 
diff --git a/apps/presi/apps/web/src/routes/(app)/+layout.svelte b/apps/presi/apps/web/src/routes/(app)/+layout.svelte
index 8afc86840..df4898c45 100644
--- a/apps/presi/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/presi/apps/web/src/routes/(app)/+layout.svelte
@@ -205,12 +205,12 @@
 				{@render children()}
 			</div>
 		</main>
-
-		<!-- Onboarding Modal -->
-		{#if presiOnboarding.shouldShow}
-			<MiniOnboardingModal store={presiOnboarding} appName="Presi" appEmoji="📊" />
-		{/if}
 	</div>
+
+	<!-- Onboarding Modal -->
+	{#if presiOnboarding.shouldShow}
+		<MiniOnboardingModal store={presiOnboarding} appName="Presi" appEmoji="📊" />
+	{/if}
 {/if}
 
 <style>
diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
index 324d2b0b0..5e7ded5c6 100644
--- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
@@ -449,12 +449,14 @@
 					{@render children()}
 				</div>
 			</main>
-			<!-- Onboarding Modal -->
-			{#if todoOnboarding.shouldShow}
-				<MiniOnboardingModal store={todoOnboarding} appName="Todo" appEmoji="✅" />
-			{/if}
 		</div>
 	</SplitPaneContainer>
+
+	<!-- Onboarding Modal -->
+	{#if todoOnboarding.shouldShow}
+		<MiniOnboardingModal store={todoOnboarding} appName="Todo" appEmoji="✅" />
+	{/if}
+
 	<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
 </AuthGate>