[StaticPicker] Picker does not wrap and does not fit in landscape mode on mobile

[LukasTy]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Any of the static pickers in landscape mode do not fit to the screen on mobile and breaks the docs page layout

Range pickers are a whole another story on this regard.

Expected behavior 🤔

The pickers should fit the screen (possibly wrap?) and not break docs page layout.

Steps to reproduce 🕹

Link to live example:

Steps:

1. Open any picker docs
2. Open it on mobile or emulate device via dev tools
3. Notice broken layout and pickers not fitting to the screen

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

System:
  OS: macOS 12.5
Binaries:
  Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
  Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
  npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Browsers:
  Chrome: 103.0.5060.134
  Edge: Not Found
  Firefox: 102.0.1
  Safari: 15.6

Order ID 💳 (optional)

No response

[flaviendelangle]

We could also allow to customize this prop based on breakpoints. I.e support <DatePicker orientation={{ xs: 'portrait', lg: 'landscape' }} />

About the default behavior when orientation="landscape", we have a debat

@joserodolfofreitas is not a fan of undoing the prop passed by the user, which I kind of agree.

[LukasTy]

This seems to be the root of the problem:

https://github.com/mui/mui-x/blob/eea77d754cfdd9871a8c07e05b6a60a6d3714ca0/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx#L13

Need to investigate if the existing solution is needed for something or just a hacky overly restrictive solution, which can and should be removed? 🤔