[DataGrid] Demo containers

[zanivan]

Related page

https://mui.com/x/react-data-grid/

Kind of issue

Broken demo

Issue description

Almost all DataGrid demos have their top corners cropped—likely due to the demo container border-radius being larger than DataGrid's.

I think the demos are using the "bg": "inline" variant for demo container, and in addition to the cropped corners, we also have these two borders that feels off:

Suggestion

Instead of using the "bg": "inline" variant, start using the "bg": "outlined" (this one), with a padding from the DataGrid and demo container

Search keywords: demo datagrid container border

[zanivan]

About the corners, I realized it's not related to the demo container—it's actually the component. Adding overflow: 'clip' to DataGrid fixes it.