fix: selects

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

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx
@@ -332,7 +332,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
                   anchor="bottom end"
                   className={tremorTwMerge(
                     // common
-                    "[--anchor-gap:4px] divide-y overflow-y-auto outline-none border",
+                    "[--anchor-gap:4px] divide-y overflow-y-auto outline-none border min-w-40",
                     // light
                     "shadow-tremor-dropdown bg-tremor-background border-tremor-border divide-tremor-border rounded-tremor-default",
                     // dark

diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx
@@ -262,9 +262,10 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
                 leaveTo="opacity-0 -translate-y-4"
               >
                 <ListboxOptions
+                  anchor="bottom start"
                   className={tremorTwMerge(
                     // common
-                    "absolute z-10 w-full divide-y overflow-y-auto outline-none rounded-tremor-default max-h-[228px] left-0 border my-1",
+                    "z-10 divide-y overflow-y-auto outline-none rounded-tremor-default max-h-[228px]  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/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx
@@ -234,9 +234,10 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
                   leaveTo="opacity-0 -translate-y-4"
                 >
                   <ComboboxOptions
+                    anchor="bottom start"
                     className={tremorTwMerge(
                       // common
-                      "absolute z-10 w-full divide-y overflow-y-auto outline-none rounded-tremor-default text-tremor-default max-h-[228px] left-0 border my-1",
+                      "z-10 divide-y overflow-y-auto outline-none rounded-tremor-default text-tremor-default max-h-[228px] 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/Select/Select.tsx b/src/components/input-elements/Select/Select.tsx
@@ -196,9 +196,10 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
                 leaveTo="opacity-0 -translate-y-4"
               >
                 <ListboxOptions
+                  anchor="bottom start"
                   className={tremorTwMerge(
                     // common
-                    "absolute z-10 w-full divide-y overflow-y-auto outline-none rounded-tremor-default max-h-[228px] left-0 border my-1",
+                    "z-10 divide-y overflow-y-auto outline-none rounded-tremor-default max-h-[228px]  border [--anchor-gap:4px]",
                     // light
                     "bg-tremor-background border-tremor-border divide-tremor-border shadow-tremor-dropdown",
                     // dark