[data grid] DataGrid inside Dialog doesn't show the full column list

[simbahandiane]

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/kind-roman-jqt8hy?file=%2Fsrc%2FApp.js%3A23%2C3

Steps: 1. 2. 3.

Current behavior

Datagrid inside the dialog doesn't show the full column list when it is placed at the end/bottom.

Noticed taht the scroll bar is already at the end but the column full list isn't shown

Expected behavior

The column list of the datagrid inside the dialog should be shown like if the data grid is not in dialog.

Context

No response

Your environment

npx @mui/envinfo

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

Search keywords: datagrid, dialog Order ID: 33625

[michelengelen]

Hey @simbahandiane the sandbox you shared is not public. Could you change that so we can have a look? Thanks! 🙇🏼

[simbahandiane]

@michelengelen Can you try this link and let me know if you can access it now?

[michelengelen]

Yes, it works. I did check the underlying code for the panel and I think we could just change the default behavior.

diff --git a/packages/x-data-grid/src/components/panel/GridPanel.tsx b/packages/x-data-grid/src/components/panel/GridPanel.tsx
index a82b53b37..6109783f4 100644
--- a/packages/x-data-grid/src/components/panel/GridPanel.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanel.tsx
@@ -79,7 +79,10 @@ const GridPanel = React.forwardRef<HTMLDivElement, GridPanelProps>((props, ref)
     () => [
       {
         name: 'flip',
-        enabled: false,
+        enabled: true,
+        options: {
+          rootBoundary: 'document'
+        },
       },
       {
         name: 'isPlaced',

Should we just make this change @cherniavskii ?

[cherniavskii]

@michelengelen

The flip was disabled in https://github.com/mui/mui-x/pull/837#discussion_r555295697. I believe the goal was to avoid this effect:

https://github.com/mui/mui-x/assets/13808724/24fe306a-9c5f-4e0c-8892-8304c15ace71

How about doing this instead?

{
  name: 'flip',
  enabled: true,
  options: {
    rootBoundary: 'document'
  }
},

[michelengelen]

@michelengelen

The flip was disabled in #837 (comment). I believe the goal was to avoid this effect:

Screen.Recording.2024-06-14.at.17.24.29.mov How about doing this instead?

{
  name: 'flip',
  enabled: true,
  options: {
    rootBoundary: 'document'
  }
},

Yes, sounds good. I have updated my diff. Lets label this a good first issue

[simbahandiane]

@michelengelen @cherniavskii We are currently in version 6. Is there any way that this fix can also be published on version 6? If it can't be, is there a work around that we can do for now?

[simbahandiane]

@michelengelen @cherniavskii We are currently in version 6. Is there any way that this fix can also be published on version 6? If it can't be, is there a work around that we can do for now?

@michelengelen @cherniavskii A gentle follow up on this.