From 0658a8ee44eae643f4da05e040ba85503e743e44 Mon Sep 17 00:00:00 2001
From: deveshanim3 <deveshsingh6986@gmail.com>
Date: Thu, 16 Apr 2026 14:55:37 +0000
Subject: [PATCH] bug: fixed calender modal stacking issue (#209)

Co-authored-by: deveshanim3 <deveshsingh6986@gmail.com>
Co-committed-by: deveshanim3 <deveshsingh6986@gmail.com>
---
 src/lib/components/DateTimeInput.svelte | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/DateTimeInput.svelte b/src/lib/components/DateTimeInput.svelte
index 5d21288b..3f181272 100644
--- a/src/lib/components/DateTimeInput.svelte
+++ b/src/lib/components/DateTimeInput.svelte
@@ -68,22 +68,23 @@
   })
 </script>
 
-<div class="relative grid grid-cols-2 gap-2" bind:this={element}>
-  <div class="relative">
+<div class="relative focus-within:z-modal grid grid-cols-2 gap-2" bind:this={element}>
+  <div class="relative group z-popover">
     <DateInput format="yyyy-MM-dd" placeholder="" bind:value={date} />
-    <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
+    <div
+      class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2 opacity-100 group-focus-within:opacity-0 group-focus-within:pointer-events-none transition-opacity pointer-events-none">
       {#if date}
-        <Button onclick={clear} class="h-5">
+        <Button onclick={clear} class="h-5 pointer-events-auto">
           <Icon icon={CloseCircle} />
         </Button>
       {:else}
-        <Button onclick={focusDate} class="h-5">
+        <Button onclick={focusDate} class="h-5 pointer-events-auto">
           <Icon icon={CalendarMinimalistic} />
         </Button>
       {/if}
     </div>
   </div>
-  <label class="input input-bordered flex items-center">
+  <label class="input input-bordered flex items-center relative">
     <input
       list="time-options"
       class="grow"