From 75cb04e485863ab5734fcce0b34247cdee1f0dd7 Mon Sep 17 00:00:00 2001
From: severinlandolt <sev.landolt@gmail.com>
Date: Fri, 6 Dec 2024 17:54:48 +0100
Subject: [PATCH] fix: datepicker position

---
 src/components/input-elements/DatePicker/DatePicker.tsx     | 3 ++-
 .../input-elements/DateRangePicker/DateRangePicker.tsx      | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/input-elements/DatePicker/DatePicker.tsx b/src/components/input-elements/DatePicker/DatePicker.tsx
index db1c93b6d..cce231ff1 100644
--- a/src/components/input-elements/DatePicker/DatePicker.tsx
+++ b/src/components/input-elements/DatePicker/DatePicker.tsx
@@ -149,9 +149,10 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
         leaveTo="opacity-0 -translate-y-4"
       >
         <PopoverPanel
+          anchor="bottom start"
           className={tremorTwMerge(
             // common
-            "absolute z-10 min-w-min left-0 divide-y overflow-y-auto outline-none rounded-tremor-default p-3 border my-1",
+            "z-10 min-w-min divide-y overflow-y-auto outline-none rounded-tremor-default p-3 border [--anchor-gap:4px]",
             // light
             "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
             // dark
diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
index f0b8474e4..5c91bc06b 100644
--- a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
+++ b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
@@ -248,10 +248,11 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
           leaveTo="opacity-0 -translate-y-4"
         >
           <PopoverPanel
+            anchor="bottom start"
             focus={true}
             className={tremorTwMerge(
               // common
-              "absolute z-10 min-w-min left-0 divide-y overflow-y-auto outline-none rounded-tremor-default p-3 border my-1",
+              "min-w-min divide-y overflow-y-auto outline-none rounded-tremor-default p-3 border [--anchor-gap:4px]",
               // light
               "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
               // dark
@@ -328,9 +329,10 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
                 leaveTo="opacity-0 -translate-y-4"
               >
                 <ListboxOptions
+                  anchor="bottom end"
                   className={tremorTwMerge(
                     // common
-                    "absolute z-10 w-full inset-x-0 right-0 divide-y overflow-y-auto outline-none border my-1",
+                    "[--anchor-gap:4px] divide-y overflow-y-auto outline-none border",
                     // light
                     "shadow-tremor-dropdown bg-tremor-background border-tremor-border divide-tremor-border rounded-tremor-default",
                     // dark