fix: fix date picker positioning

einride · Nov 2, 2023 · af82f54 · af82f54
1 parent d93a0a0
commit af82f54
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/five-teachers-switch.md b/.changeset/five-teachers-switch.md
@@ -0,0 +1,6 @@
+---
+"@einride/ui-dates": patch
+"@einride/ui": patch
+---
+
+Fix date picker positioning.
diff --git a/packages/einride-ui-dates/src/components/DatePickerInput/DatePickerInput.tsx b/packages/einride-ui-dates/src/components/DatePickerInput/DatePickerInput.tsx
@@ -75,6 +75,7 @@ export const DatePickerInput = ({
       <Global
         styles={css`
           .mantine-Popover-dropdown {
+            position: absolute;
             background: ${theme.colors.background.secondaryElevated};
             border-radius: ${theme.borderRadii.lg};
             padding: ${2 * theme.spacingBase}rem;

diff --git a/packages/einride-ui-dates/src/components/DateRangePickerInput/DateRangePickerInput.tsx b/packages/einride-ui-dates/src/components/DateRangePickerInput/DateRangePickerInput.tsx
@@ -75,6 +75,7 @@ export const DateRangePickerInput = ({
       <Global
         styles={css`
           .mantine-Popover-dropdown {
+            position: absolute;
             background: ${theme.colors.background.secondaryElevated};
             border: none;
             border-radius: ${theme.borderRadii.lg};

diff --git a/packages/einride-ui/src/components/controls/dates/DatePicker/DatePicker.tsx b/packages/einride-ui/src/components/controls/dates/DatePicker/DatePicker.tsx
@@ -82,6 +82,7 @@ export const DatePicker = ({
       <Global
         styles={css`
           .mantine-Popover-dropdown {
+            position: absolute;
             background: ${theme.colors.background.secondaryElevated};
             border-radius: ${theme.borderRadii.lg};
             padding: ${2 * theme.spacingBase}rem;

diff --git a/packages/einride-ui/src/components/controls/dates/DateRangePicker/DateRangePicker.tsx b/packages/einride-ui/src/components/controls/dates/DateRangePicker/DateRangePicker.tsx
@@ -82,6 +82,7 @@ export const DateRangePicker = ({
       <Global
         styles={css`
           .mantine-Popover-dropdown {
+            position: absolute;
             background: ${theme.colors.background.secondaryElevated};
             border: none;
             border-radius: ${theme.borderRadii.lg};