fix(sections-editor): stop Add variant button overlapping field controls - #7156
Merged
Merged
Conversation
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
force-pushed
the
fix-variants-button-overlap
branch
from
September 11, 2026 15:01
a91ab39 to
c093378
Compare
pedrofrxncx
enabled auto-merge (squash)
September 14, 2026 14:42
pedrofrxncx
approved these changes
Sep 14, 2026
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
In the site editor's section properties panel, the multivariate Add variant flag button was absolutely positioned at
right-0 top-0of the field it wraps (multivariate-field-wrapper.tsx).That's empty space for the common stacked field (label above input), but
BooleanFieldis the one field with an inline layout —flex items-center justify-betweenwith theSwitchpinned 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 toitems-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).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.