Skip to content

[6.x] Fix fields overflowing narrow groups - #15420

Merged
jasonvarga merged 1 commit into
statamic:6.xfrom
eminos:fix/group-field-layout
Sep 9, 2026
Merged

[6.x] Fix fields overflowing narrow groups#15420
jasonvarga merged 1 commit into
statamic:6.xfrom
eminos:fix/group-field-layout

Conversation

@eminos

@eminos eminos commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Fixes #15419.

A narrow Group can let its fields extend outside its assigned column, including when used inside a Bard set. For example, two full-width selects inside a 25% group beside a 75% textarea overflow instead of fitting the group.

The inner publish grid always defines 12 tracks, and its container queries resolve against a wider ancestor panel. The gaps alone can exceed the group's width. Once the group gets its own container, inherited --col-span values also need resetting so nested fields do not retain a parent's fractional span.

This change:

  • Makes the Group's inner wrapper a named panel container, so its fields respond to the group's available width.
  • Uses one grid track below the existing @lg/panel breakpoint and 12 tracks above it.
  • Resets --col-span at each publish/field grid so nested grids calculate their own spans.

Narrow groups stack their fields; wider groups retain configured column widths. This changes layout only, with no blueprint or stored-value migration.

Tests

Adds a Vitest browser project using the existing Playwright dependency. These tests mount the core publish and fieldtype components with the actual Control Panel CSS so assertions measure browser layout, which jsdom cannot provide. The existing CI command runs the new project alongside unit and Storybook tests.

The 20 cases cover the textarea/select reproduction, several group and panel widths, the 511/512px breakpoint, nested groups, bordered and borderless groups, fullscreen transitions, collapse/expand, spacers, and nested form-value updates.

  • Unpatched current 6.x: 11 layout tests fail, 9 pass.
  • Patched branch: npm run test passes all 894 tests across 117 files.
  • npm run build passes.
  • Manually verified nested Bard/group layouts and fullscreen behavior in the Control Panel.

Prepared with AI assistance; the patch was inspected and tested locally before submission.

@jasonvarga jasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks ok to me. @jaygeorge can you give the css parts of this a once-over?

@jasonvarga
jasonvarga requested a review from jaygeorge September 8, 2026 18:10

@jaygeorge jaygeorge left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS part looks good to me.

@jasonvarga
jasonvarga merged commit 00c0a5b into statamic:6.x Sep 9, 2026
62 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fields overflow narrow Group fieldtypes in publish forms and Bard sets

3 participants