[BUG] - DatePicker is not working as expected on mobile. Responsive is broken.

[IsraelDCastro]

NextUI Version

2.4.8

Describe the bug

The DatePicker component on mobile is out of the screen, creating a bad UX experience while using it. You can see the image to check it. The code of the component:

<DatePicker
          label="Arrival date"
          labelPlacement="outside"
          name="arrival_date"
          id="arrival_date"
          classNames={{
            calendar: "min-w-[300px]"
          }}
          visibleMonths={2}
          dateInputClassNames={{ input: "arrival-date-input" }}
          required
          color={errors.arrival_date && touched.arrival_date ? "danger" : ""}
          errorMessage={errors.arrival_date && touched.arrival_date && errors.arrival_date}
          isInvalid={errors.arrival_date && touched.arrival_date}
/>

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Use the DatePicker component with the prop: visibleMonths={2}

Expected behavior

As a user, I expected to see the DatePicker maybe in vertical responsive view or with horizontal scroll to get a better UX.

Screenshots or Videos

No response

Operating System Version

macOs

Browser

Chrome

[linear[bot]]

ENG-1546 [BUG] - DatePicker is not working as expected on mobile. Responsive is broken.

[IsraelDCastro]

@media only screen and (max-width: 768px) {
    div[data-slot="calendar"] {
        --calendar-width: 156px !important;
    }

    div[data-slot="grid-wrapper"] {
        @apply flex-col;
    }
}

I made this temporary fix, but it is not the best way to fix it.

[prudvinani]

@IsraelDCastro, hi! Could you please send me the exact router where you're facing the issue, so I can work on it?

[IsraelDCastro]

@IsraelDCastro, hi! Could you please send me the exact router where you're facing the issue, so I can work on it?

@prudvinani I'm using "react-router-dom": "^6.26.0"