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

[TheOneTheOnlyJJ]

Related page

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

Kind of issue

Broken demo

Issue description

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:

Search keywords: picker customization

[LukasTy]

Thank you for reporting this problem. 🙏

[TheOneTheOnlyJJ]

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]

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]

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]

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.

mui-x/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

Line 576 in 1ea2352

showDaysOutsideCurrentMonth={calendars === 1 && showDaysOutsideCurrentMonth}

The UX/UI with multiple calendars and that property would be "strange". 🤔

[github-actions]

⚠️ 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.