fix bug on Modal children not having its z-index

fivaz · May 23, 2024 · 91b8ea9 · 91b8ea9
1 parent 28c5d88
commit 91b8ea9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
@@ -9,7 +9,7 @@
 
 {#if show}
 	<Portal target="body">
-		<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<div class="fixed inset-0 z-20 flex items-center justify-center">
 			<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events-->
 			<div class="absolute inset-0 bg-black opacity-50" on:click={() => dispatch('close')} />
 

diff --git a/src/lib/components/task-form/task-form-image/TaskFormImage.svelte b/src/lib/components/task-form/task-form-image/TaskFormImage.svelte
@@ -25,7 +25,8 @@
 				<img alt="event description" src={taskIn.image} />
 			</button>
 			<Modal on:close={() => (isImageOpen = false)} show={isImageOpen}>
-				<div class="rounded-lg bg-white p-2 shadow">
+				<!--normally I wouldn't need to restate the z-index of the Modal to its children, but due to an unknown bug I have to-->
+				<div class="z-20 rounded-lg bg-white p-2 shadow">
 					<img
 						alt="event description"
 						class="max-w-11/12 h-auto max-h-[90vh] w-auto object-contain"