Tabs: stop insetting a tab's content twice on the right - #1214
Draft
JeanMarcMilletScality wants to merge 1 commit into
Draft
JeanMarcMilletScality wants to merge 1 commit into
JeanMarcMilletScality wants to merge 1 commit into
Conversation
A tab's content box was inset 1rem on all four sides. Content that carries a right gutter of its own -- a tab-layout form, which has its layout's padding plus the room it reserves for a scrollbar -- was therefore inset twice on that side, which is what left its scrollbar floating in the middle of a gap rather than near the edge. Drop the right padding only. Left, top and bottom stay: nothing else supplies those. Content that wants a right inset and owns none now has to add it.
Contributor
Hello jeanmarcmilletscality,My role is to assist you with the merge of this Available options
Available commands
Status report is not available. |
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
This branch has not been deployed
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.
TL;DR — Tabs: a tab's content was inset on the right twice when the content already had a gutter of its own, leaving a form's scrollbar floating in the middle of a gap instead of near the edge; the tab no longer adds that side.
Context / Why
TabContentinsets its content by 1rem on all four sides. A tab-layoutFormcarries a right gutter of its own — its layout'spadding-rightplus the room reserved for its scrollbar — so on that side the two stack up.🧩 Approach
The right gutter belongs to whatever the tab renders, since only the content knows whether it has already paid for one. Left, top and bottom stay — nothing else supplies those.
What this changes for content that has no gutter of its own, which is the reason this is worth a look rather than a rubber stamp. Every
<Tab>call site across the consuming applications:withoutPaddingThe nine that already opt out of padding entirely are unaffected. The remaining eighteen lose a 1rem right inset unless their content brings one — and none of them has a
Formas its direct child: every one renders a repo-local wrapper component, so the change cannot be conditioned on what the child turns out to be.That leaves two shapes for this, and this PR takes the first:
Tabopt-in beside the existingwithoutPadding, so nothing changes until a call site asks. No fallout, one more prop on an API whose padding story is already two props wide.🔍 Review focus
tabsv2/StyledTabs.ts › TabContent— every tab in every product renders through this. The blast radius is cosmetic and uniform (one edge, 1rem), but it is not zero, and option 2 above avoids it entirely.🧪 How to test
layout={{ kind: 'tab' }}form.Follow-up
Cancel/Save/Deleterow is left ending further right than the fields below it, by exactly the scrollbar's width. That row is not a scroll container, soscrollbar-gutteris inert on it, and the bar's width is a keyword rather than a length — there is no constant to compensate with. It has its own diagnosis and three candidate fixes, none chosen. This PR should not merge before that is settled, or the visible result is a worse misalignment than the one it fixes.🔗 References
🤖 Generated with Claude Code