DynamicForm: sectionFormField min-width: 25vmax forces single-column layout in multi-column web parts

[VitendyAdmin]

Category

[ ] Bug
[x] Enhancement / improvement

Version

3.24.0

Expected / Desired Behavior

DynamicForm should render correctly when placed inside a multi-column SharePoint page section (e.g., two-column or three-column layout). The form fields should respect the available container width.

Observed Behavior

When DynamicForm is placed in a web part inside a multi-column page section, the form forces the entire page into single-column layout. This happens because sectionFormField in DynamicForm.styles.ts applies min-width: 25vmax inside a :has(div) selector:

':has(div)': {
    'max-width': '50vmin',
    'min-width': '25vmax',
    padding: '20px'
}

On a 1920px screen, 25vmax = 480px minimum per field. This exceeds the available width in a multi-column section, causing SharePoint's responsive layout to collapse to single column.

Steps to Reproduce

1. Create a SharePoint modern page with a two-column section
2. Add a web part that renders <DynamicForm> bound to a list item
3. Observe the page switches to single-column layout when the form renders

Suggested Fix

Replace viewport-relative units with container-relative values that work in both standalone and multi-column contexts:

':has(div)': {
    'max-width': '100%',
    'min-width': '0',
    padding: '20px'
}

This preserves the padding and lets the form fill its container without forcing a minimum width. The @media (min-width: 480px) { width: 90% } rule already handles reasonable field sizing.

The styles prop can still be used to customize these values for specific use cases (as shown in the docs).

Happy to submit a PR for this.

[github-actions]

Thank you for submitting your first issue to this project.

[VitendyAdmin]

Filed in error — closing.