[data grid] Filter panel breaks layout on small display

[bruceharrison1984]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Opening the filter panel on a small display breaks the layout on the X axis.

Expected behavior 🤔

I'd expect the filter panel to honor the page layout and not break out beyond the expected page bounds.

Steps to reproduce 🕹

Steps:

1. Open filter panel on a mobile device, when the DataFrid is assigned full width.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

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

Order ID 💳 (optional)

No response

[alexfauquette]

A workaround could be to limit the width of the panel:

componentsProps={{ filterPanel: { sx: { maxWidth: "100vw" } } }}

https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-4t90kx?file=/demo.tsx

I don't see a good behavior for the filter panel on small screen

[bruceharrison1984]

@alexfauquette Thanks for the workaround, this'll get me unstuck at least in the near-term. I agree that the current panel layout won't gracefully perform on a smaller screen, and it'd likely need to be reflowed in a more vertical-centric way in order to improve UX.

Thanks 👍

[flaviendelangle]

I think that could be a good topic to discuss with @gerdadesign

[gerdadesign]

Should these elements stack vertically past a certain breakpoint? (Do we have existing breakpoints already defined?)

[alexfauquette]

Mo, for now, the sizes are fixed except for the "value" input which can be customized by dev. The filter panel itself only have a min width

[jacobcarrington]

Surprised to see this is still an issue in version 6. My work around as it effects all DataGrids is to update the theme defaultProps.

const theme: ThemeOptions = {
 ...
  components: {
    MuiDataGrid: {
      defaultProps: {
        slotProps: {
          panel: {
            sx: {
              "& .MuiDataGrid-panelWrapper": {
                maxWidth: "calc(100vw - 4rem)",
              },
            },
          },
        },
      },
    },
  },
};

[cherniavskii]

We can adopt this workaround in the data grid since it's better than the current behavior anyway 👍

[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.

@bruceharrison1984: 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.