Steps to reproduce

Link to live example: (required): https://codesandbox.io/p/sandbox/upbeat-herschel-qlhhpw

After the new datagrid updates, the column titles have a strange width on mobile devices such as tablets and cell phones

Steps:

1. After the codesandbox code is open, expand the right side of the view completely
2. Open browser developer tools, enable responsive mode, select a mobile device (example: Galaxy tab S4)
3. Check that the columns will have a type of "overflow" that impairs reading

The behavior does not only occur in codesandbox, but in real applications, including the example on the page:
https://mui.com/x/react-data-grid/column-header/

Datagrid version: 7.6.1

Current behavior

Titles are partially hidden when transitioning from desktop -> mobile mode

Expected behavior

Column titles must be readable in desktop mode and on mobile devices

Context

No response

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: header datagrid

Search keywords: