From 8fa58ded8f31abea64e9efdacd05b6d68ba88b48 Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Sat, 28 Mar 2026 21:20:36 +0100
Subject: [PATCH] fix shadow and blurs on modals and etc

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 frontend/src/lib/components/Alert.svelte             | 12 +++++++-----
 frontend/src/lib/components/ConfirmPrompt.svelte     |  9 +++++----
 frontend/src/lib/components/Loader.svelte            |  1 -
 frontend/src/lib/components/Modal.svelte             |  8 ++++----
 .../src/lib/components/modal/CommandPalette.svelte   |  8 ++++++--
 5 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/Alert.svelte b/frontend/src/lib/components/Alert.svelte
index a682ddd..6c61b61 100644
--- a/frontend/src/lib/components/Alert.svelte
+++ b/frontend/src/lib/components/Alert.svelte
@@ -27,13 +27,13 @@
 	$: {
 		if (visible && !alertInitialized) {
 			window.addEventListener('keydown', keyHandler);
-			// Prevent body scrolling when alert is open
+			// prevent body scrolling when alert is open
 			document.body.style.overflow = 'hidden';
 			handleAlertOpen();
 			alertInitialized = true;
 		} else if (!visible && alertInitialized) {
 			window.removeEventListener('keydown', keyHandler);
-			// Restore body scrolling when alert is closed
+			// restore body scrolling when alert is closed
 			document.body.style.overflow = 'auto';
 			handleAlertClose();
 			alertInitialized = false;
@@ -244,10 +244,12 @@
 </script>
 
 {#if visible}
-	<div class="fixed top-0 left-0 w-full h-full opacity-[0.5]" />
 	<div
 		transition:fade={{ duration: 150 }}
-		class="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-overlay/[0.92] z-20"
+		class="fixed top-0 left-0 w-full h-full bg-overlay/[0.92] z-[19]"
+	/>
+	<div
+		class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-20"
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="alert-title"
@@ -255,7 +257,7 @@
 	>
 		<section
 			bind:this={alertElement}
-			class="shadow-2xl ring-1 ring-white/10 dark:shadow-gray-900/80 w-[32rem] bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-colors duration-200"
+			class="ring-1 ring-white/10 w-[32rem] bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-colors duration-200"
 		>
 			<!-- Header -->
 			<div
diff --git a/frontend/src/lib/components/ConfirmPrompt.svelte b/frontend/src/lib/components/ConfirmPrompt.svelte
index 860c08c..e0e11ba 100644
--- a/frontend/src/lib/components/ConfirmPrompt.svelte
+++ b/frontend/src/lib/components/ConfirmPrompt.svelte
@@ -18,13 +18,13 @@
 	$: {
 		if (visible && !confirmInitialized) {
 			window.addEventListener('keydown', keyHandler);
-			// Prevent body scrolling when confirm prompt is open
+			// prevent body scrolling when confirm prompt is open
 			document.body.style.overflow = 'hidden';
 			handleConfirmOpen();
 			confirmInitialized = true;
 		} else if (!visible && confirmInitialized) {
 			window.removeEventListener('keydown', keyHandler);
-			// Restore body scrolling when confirm prompt is closed
+			// restore body scrolling when confirm prompt is closed
 			document.body.style.overflow = 'auto';
 			handleConfirmClose();
 			confirmInitialized = false;
@@ -163,7 +163,8 @@
 {#if visible}
 	<div
 		transition:fade={{ duration: 150 }}
-		class="fixed top-0 left-0 w-full h-full bg-overlay/[0.93] transition-colors duration-200"
+		class="fixed top-0 left-0 w-full h-full bg-overlay/[0.92]"
+		style="z-index: 19;"
 	/>
 	<div
 		class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-20"
@@ -174,7 +175,7 @@
 	>
 		<section
 			bind:this={confirmElement}
-			class="flex flex-col items-center w-1/3 bg-slate-100 dark:bg-gray-800 shadow-2xl ring-1 ring-white/10 dark:shadow-gray-900/80 rounded-md transition-colors duration-200"
+			class="flex flex-col items-center w-1/3 bg-slate-100 dark:bg-gray-800 ring-1 ring-white/10 rounded-md transition-colors duration-200"
 		>
 			<div
 				class="bg-cta-orange2 dark:bg-orange-600 text-white rounded-tl-md rounded-tr-md w-full transition-colors duration-200"
diff --git a/frontend/src/lib/components/Loader.svelte b/frontend/src/lib/components/Loader.svelte
index ef9de9d..28ffaa8 100644
--- a/frontend/src/lib/components/Loader.svelte
+++ b/frontend/src/lib/components/Loader.svelte
@@ -15,7 +15,6 @@
 </script>
 
 {#if $isLoading && isAnimating}
-	<div class="fixed top-0 left-0 w-full h-full opacity-[0.5]" transition:fade={{ duration }} />
 	<div
 		transition:fade={{ duration }}
 		class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-50"
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index 4300018..49a4782 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -317,12 +317,12 @@
 {#if visible}
 	<div bind:this={bindTo}>
 		<div
-			class="fixed top-0 left-0 w-full h-full opacity-[0.5]"
 			transition:fade={{ duration: 150 }}
+			class="fixed top-0 left-0 w-full h-full bg-overlay/[0.92]"
+			style="z-index: 19;"
 		/>
 		<div
-			transition:fade={{ duration: 150 }}
-			class="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-overlay/[0.92] z-20"
+			class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-20"
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="modal-title"
@@ -330,7 +330,7 @@
 		>
 			<section
 				bind:this={modalElement}
-				class="shadow-2xl ring-1 ring-white/10 dark:shadow-gray-900/80 bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-all duration-200
+				class="ring-1 ring-white/10 bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-all duration-200
 					{fullscreen
 					? 'fixed inset-0 w-full h-full max-w-none max-h-none rounded-none'
 					: 'w-auto ml-20 mr-8 max-h-[90vh]'}"
diff --git a/frontend/src/lib/components/modal/CommandPalette.svelte b/frontend/src/lib/components/modal/CommandPalette.svelte
index 39936fc..dedb8e2 100644
--- a/frontend/src/lib/components/modal/CommandPalette.svelte
+++ b/frontend/src/lib/components/modal/CommandPalette.svelte
@@ -236,11 +236,15 @@
 </script>
 
 {#if visible}
+	<div
+		transition:fade={{ duration: 150 }}
+		class="fixed inset-0 bg-overlay/[0.92]"
+		style="z-index: 49;"
+	/>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div
-		transition:fade={{ duration: 150, easing: cubicOut }}
-		class="fixed inset-0 z-50 flex items-start justify-center pt-20 bg-overlay/[0.92]"
+		class="fixed inset-0 z-50 flex items-start justify-center pt-20"
 		on:click|self={close}
 		on:keydown={handleKeydown}
 		role="dialog"