[DateRangePicker] - DateRangePickerInput 'xs' style doesn't get applied

[cclen]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

The 2 inputs of the DateRangePicker stay side-by-side even on xs screens, instead of wrapping into two rows.

Expected behavior 🤔

The 2 inputs of the DateRangePicker wrap into two rows on xs screens. There is code suggesting that it should. https://github.com/mui/mui-x/blob/f389812ebe1222e6aaa5b2b9dc3cf1e784488098/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerInput.tsx#L30-L41

Updating the value of the breakpoints.down from 'xs' to 'sm' may fix the issue. Based on the documentation the theme.breakpoints.down(key) applies for screen widths less than the screen size given by the breakpoint key (exclusive).

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/stupefied-artem-3dco33?file=/demo.js

Steps:

1. Decrease screen size until xs screen width

Context 🔦

Trying to make the DateRangePicker work nicely on mobile.

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 11.6.1
  Binaries:
    Node: 18.5.0 - ~/.nvm/versions/node/v18.5.0/bin/node
    Yarn: Not Found
    npm: 8.12.1 - ~/.nvm/versions/node/v18.5.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.4 
    @emotion/styled: ^11.10.4 => 11.10.4 
    @mui/base:  5.0.0-alpha.96 
    @mui/core-downloads-tracker:  5.10.4 
    @mui/material: ^5.10.4 => 5.10.4 
    @mui/private-theming:  5.10.3 
    @mui/styled-engine:  5.10.4 
    @mui/system:  5.10.4 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.3 
    @mui/x-data-grid: ^5.17.2 => 5.17.2 
    @mui/x-date-pickers:  5.0.1 
    @mui/x-date-pickers-pro: ^5.0.1 => 5.0.1 
    @mui/x-license-pro:  5.17.0 
    @types/react:  17.0.43 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  4.7.4 

Order ID 💳 (optional)

No response

[alexfauquette]

Effectively, the code display TextFields in columns when the screen width goes below 0 which is not super useful.

But the error is here from the beginning, and I assume it would break some layout to replace this xs by sm.

We do not know exactly what developers are rending inside. For example in the documentation demo, we add a "to" between the textfields, with does not look good in the column layout.

Maybe better to remove this dead code section, and let developers fix the case according to their own design

https://codesandbox.io/s/hopeful-panka-h7em31?file=/demo.js

[flaviendelangle]

With the new field components, this problem will be very different. If we try to solve it, we should have them in mind too.