search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.93k stars 1.2k forks source link

[docs] Date Range Customization Playground does not fit on smaller screens #13736

Closed TheOneTheOnlyJJ closed 6 days ago

TheOneTheOnlyJJ commented 1 week ago

Related page

https://mui.com/x/react-date-pickers/playground/

Kind of issue

Broken demo

Issue description

image As you can see, the date range component from the playground demo does not fit on smaller screens. It is not possible to go to the next months on the picker, as only the Left Arrow Icon Button is visible.

Context

Information for my screen is the following: image

Search keywords: picker customization

LukasTy commented 1 week ago

Thank you for reporting this problem. 🙏

TheOneTheOnlyJJ commented 1 week ago

I've found it's because of "Static desktop mode". It may not be a bug after all, and just my option configuration mistake.

LukasTy commented 1 week ago

I've found it's because of "Static desktop mode". It may not be a bug after all, and just my option configuration mistake.

It's not ideal—a horizontal overflow is desirable in this case. 😉

TheOneTheOnlyJJ commented 1 week ago

Also, note that the "Show days outside current month" option does not seem to apply. I don't know if it should be for side-by-side month pickers like that one. If it should apply, this may not be a docs issue.

LukasTy commented 1 week ago

Also, note that the "Show days outside current month" option does not seem to apply. I don't know if it should be for side-by-side month pickers like that one. If it should apply, this may not be a docs issue.

That is the intended behavior. https://github.com/mui/mui-x/blob/1ea2352847481238902cabbeffe85b1fbe34921f/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx#L576 The UX/UI with multiple calendars and that property would be "strange". 🤔

github-actions[bot] commented 6 days ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@TheOneTheOnlyJJ: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.