Skip to content

fix(sections-editor): stop Add variant button overlapping field controls - #7156

Merged
pedrofrxncx merged 1 commit into
decocms:mainfrom
vitoUwu:fix-variants-button-overlap
Sep 16, 2026
Merged

pedrofrxncx merged 1 commit into
decocms:mainfrom
vitoUwu:fix-variants-button-overlap

Conversation

@vitoUwu

@vitoUwu vitoUwu commented Sep 11, 2026

Copy link
Copy Markdown
Contributor

Summary

In the site editor's section properties panel, the multivariate Add variant flag button was absolutely positioned at right-0 top-0 of the field it wraps (multivariate-field-wrapper.tsx).

That's empty space for the common stacked field (label above input), but BooleanField is the one field with an inline layout — flex items-center justify-between with the Switch pinned right — so the flag rendered directly on top of the toggle. It covered the switch, stole clicks aimed at its right half, and popped the "Add variant" tooltip over the control on hover.

Fix: give the button its own gutter column (grid-cols-[minmax(0,1fr)_auto] items-start) instead of overlaying the field. The button keeps its visual position (top-right, aligned with the label row thanks to items-start) and now also renders after the field in the DOM, so focus order is input → Add variant rather than the reverse.

Trade-off: fields that can be made multivariate lose ~32px of width to the gutter. That's the cost of not covering controls; the alternative — keeping the overlay and special-casing boolean via a layout hint threaded from schema-form.tsx — is more code and breaks again for the next inline-layout field.

Testing

  • bun run fmt, bun run --cwd=apps/web check, bun run lint (0 errors; the 14 warnings are pre-existing and none are in the touched file).
  • Verified manually in the sections editor: the "Use Simple Search" toggle on Global Header is no longer covered, and the flag button still wraps the field into a variant.

No existing test asserted the overlay.

🤖 Generated with Claude Code


Summary by cubic

Stops the "Add variant" button in the sections editor's property panel from overlapping field controls, so boolean toggles are no longer covered or have their clicks stolen.

The button now sits in its own gutter column instead of overlaying the field and renders after the field, so focus order is input → Add variant. Fields that can be multivariate lose ~32px of width to the gutter.

Written for commit c093378. Summary will update on new commits.

Review in cubic

The multivariate "Add variant" flag was absolutely positioned at the
top-right of the field it wraps. That is empty space for the common
stacked field (label above input), but BooleanField lays out inline with
its Switch pinned right, so the flag rendered on top of the toggle —
covering it and stealing its clicks.

Give the button its own gutter column instead of overlaying, and render
it after the field so focus order is input -> Add variant.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@vitoUwu
vitoUwu force-pushed the fix-variants-button-overlap branch from a91ab39 to c093378 Compare September 11, 2026 15:01
@pedrofrxncx
pedrofrxncx enabled auto-merge (squash) September 14, 2026 14:42
@pedrofrxncx
pedrofrxncx merged commit e8c1d11 into decocms:main Sep 16, 2026
72 of 88 checks passed
decocms Bot pushed a commit that referenced this pull request Sep 16, 2026
PR: #7156 fix(sections-editor): stop Add variant button overlapping field controls
Bump type: patch

- decocms (apps/api/package.json): 4.367.1 -> 4.367.2
- @decocms/native (apps/native/package.json): 4.367.1 -> 4.367.2

Deploy-Scope: web
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.

2 participants