[data grid] Regression, new different behaviour on mobile leads to hidden column header labels

[Reckless-Satoshi]

Steps to reproduce 🕹

On Mobile, column headers labels are hidden by default by the sorting and menu buttons. This was not the behavior a few versions back (I cannot pinpoint exactly when this regression took place, or if it's a problem inherited form a dependency):

(Note how username is not visible)

On desktop:

Link to live example:
Any Data Grid in https://mui.com/x/react-data-grid with a column label that fits tight in the header has this "issue". I used as example the first DataGrid in https://mui.com/x/react-data-grid/column-definition/ . Just press F12 and enable mobile view to see how annoying is not being able to read headers that should otherwise fit in.

Current behavior 😯

Since some recent MUI-X update, the mobile view of DataGrid will always show the Sort and Menu (triple dot) buttons in the column headers. This leads to the labels losing visibility. Early v6 versions of MUI-X DataGrid would only show the sort and menu buttons when the header is touched in mobile or hovered in desktop. As my app mobile DataGrid relied on very tight header labels in order to optimize use of screen space, now they are unreadable by default after updating to latest MUI / MUI-X.

Expected behavior 🤔

The column header should remain readable unless hovered or tapped.

Context 🔦

I have tried to replicate the old behaviour by dynamically turning on/off disableColumnMenu and Sortable on the columns definitions with the callbacks onColumnHeaderEnter and onColumnHeaderOut. However the re-rendering with new columns results in a jarring jittering of the whole DataGrid.

Any workaround or help is appreciated. The only option I contemplate at the moment is to permanently disable column sorting and menu to recover readability at the expense of functionality.

[m4theushw]

Since mobile doesn't have hover state, this change was done to avoid triggering the sorting when tapping on the column menu button. The old behavior can be restored with CSS, but note that this odd behavior will return. Below is an example for the column menu button. You can check the old behavior in https://v5.mui.com/x/react-data-grid/column-definition/

<DataGrid
  sx={{
    '@media (hover: none)': {
      '&& .MuiDataGrid-menuIcon': {
        width: 0,
        visibility: 'hidden',
      }
    },
    '&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-menuIcon': {
      width: 'auto',
      visibility: 'visible',
    }
  }}
/>

[Reckless-Satoshi]

@m4theushw very useful!

I have been able to almost replicate the old behaviour (show header icons on tap) with

const StyledDataGrid = styled(DataGrid)({
  '@media (hover: none)': {
    '&& .MuiDataGrid-menuIcon': {
      width: 0,
      visibility: 'hidden',
    },
    '&& .MuiDataGrid-sortIcon': {
      width: 0,
      visibility: 'hidden',
    }
  },
  '&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-menuIcon': {
    width: 'auto',
    visibility: 'visible',
  },
  '&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-sortIcon': {
    width: 'auto',
    visibility: 'visible',
  }
});

The column labels are were tightest do still lose 2 or 3 characters, but it is more readable now.

Desktop

Mobile

Mobile and Desktop used to look identical
Mobile with CSS fix above

[MBilalShafi]

@mui/xgrid, this is a corner case on mobile screens where below a specific column width, the text seems to disappear, to me, we could trade-off this with the benefit we achieve by showing the hover icons by default on mobile and prevent multiple taps/confusing UX.

Any opinions will be appreciated!

CC @gerdadesign

[cherniavskii]

@MBilalShafi

Maybe we could improve column header truncation on mobile?
There's plenty of space wasted because we render sorting and filter icons even when they're visually hidden:

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[MBilalShafi]

Maybe we could improve column header truncation on mobile?

True, this could certainly free up some space, especially when the icons have visibility: hidden but they do actually take up some space.