From c8b2aa8b5a2ac722caf991040efad3574ab694d2 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Tue, 17 Dec 2024 18:03:16 +0100
Subject: [PATCH] Fix z-indices so the loading indicator is visible

---
 src/lib/components/LazyImage.svelte | 2 ++
 src/routes/+layout.svelte           | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
index 2d1c3ba..184deb9 100644
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@@ -36,6 +36,8 @@
     load = true;
   };
 
+  // Once the image component is mounted (e.g. when the image has loaded),
+  // transition the opacity to fade-in the image
   const img_opacity_handler = (node: HTMLElement) => {
     setTimeout(() => (node.style.opacity = "1"), 20);
   };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e84e937..7c42a4b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -114,7 +114,7 @@
 
 <LoadingIndicator />
 
-<Drawer>
+<Drawer zIndex="z-30">
   <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
   {#if $drawerStore.id === "menu_drawer"}
     <!-- Menu Drawer -->
@@ -216,7 +216,7 @@
 </Drawer>
 
 <nav>
-  <div class="fixed left-0 right-0 top-0 z-50">
+  <div class="fixed left-0 right-0 top-0 z-40">
     <AppBar
       slotDefault="place-self-center"
       slotTrail="place-content-end"