fix: datepicker position

tremorlabs · Dec 6, 2024 · 75cb04e · 75cb04e
1 parent dfc8978
commit 75cb04e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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