When using LayoutGridField & mui theme with an array field, size of grid makes wrapping impossible

[legomind]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

mui

Version

6.0.1

Current Behavior

When using a uiSchema like this:

{
    "Sources": {
        "ui:options": {
            "orderable": true,
            "removable": true
        },
        "size": 12,
        "items": {
            "ui:field": "LayoutGridField",
            "ui:layoutGrid": {
                "ui:row": {
                    "spacing": 2,
                    "children": [
                        {
                            "ui:columns": {
                                "size": 4,
                                "children": ["Type", "Owner"]
                            }
                        },
                        {
                            "ui:row": {
                                "spacing": 2,
                                "children": [ "Server", "Database", "BatchType" ]
                            }
                        }
                    ]
                }
            }
        }
    }
}

the containing grid has the size prop set to auto, causing all the items to be rendered on one row, and off of the page (overflow is set to auto as well)

Expected Behavior

I would expect some way to set the container size explicitly, otherwise there is no way to get anything to flow down.
Here is what the same form looks like when size is set to 12:

Steps To Reproduce

No response

Environment

- OS:
- Node:
- npm:

Anything else?

No response

[legomind]

Just to note this behaviour is also present when not using any uiSchema options, note the overflow here:

Using react devtools and setting the Grid3 prop size to 12 fixes this issue:

[heath-freenome]

@legomind where "spacing": "X" is defined in the uiSchema you can also pass other props that are applied directly to the MUI grid, including things like style. So you should be able to tune the grid appropriately. So you could add:

{
    "Sources": {
        "ui:options": {
            "orderable": true,
            "removable": true
        },
        "size": 12,
        "items": {
            "ui:field": "LayoutGridField",
            "ui:layoutGrid": {
                "ui:row": {
                    "spacing": 2,
                    "size": 12,
                    "style": { /* whatever you need to tune */}
                    "children": [
                        {
                            "ui:columns": {
                                "size": 4,
                                "children": ["Type", "Owner"]
                            }
                        },
                        {
                            "ui:row": {
                                "spacing": 2,
                                "children": [ "Server", "Database", "BatchType" ]
                            }
                        }
                    ]
                }
            }
        }
    }
}

[legomind]

I will give this a try, but when not using any uiSchema options, shouldn't the default behavior be to NOT shove everything onto a single row?

[heath-freenome]

@legomind The idea behind the LayoutGridField is that the layout is entirely at the command of the uiSchema. There is no "default behavior" besides what the user of the feature comes up with. In this case, your grid definitions caused what you see.

[legomind]

I totally understand that, but if I was to take the example from the docs about putting multiple fields on a line and add several more fields, the row would overflow off of the page instead of wrap. That can't be the intended behaviour?

So far, the only way I have been able to correct this is to copy the template and change the size property from auto to 12

[heath-freenome]

@legomind I just fixed the ArrayFieldItemTemplate in @rjsf/mui to replace size='auto' with a better responsive fix... Try it out on 6.0.2