Datepicker Breakpoints for numberOfColumns

[sam-cuboh]

Hi! for the DatePicker component, it would be really helpful if we were able to set set break points when using the prop numberOfColumns. That way for smaller screen sizes, the columns could collapse and stack over one another.

[rtivital]

You can do that with useMatches hook – https://mantine.dev/styles/responsive/#use-matches-hook

const numberOfColumns = useMatches({ base: 1, sm: 2, xl: 3 });

[sam-cuboh]

hi! sorry maybe it wasn't clear. but instead of the columns changing and seeing less calendars, i would want them to break into separate rows. so if you have numberOfColumns: 2 you would always see 2 calendars. on larger screens they would be side by side. on smaller screens (once the breakpoints are hit) they would stack on top of each other vertically.

[rtivital]

In this case, you can apply styles to add responsiveness, I consider this to be a bad UX, so it will not be part of the library.