fix: SW-2528 pad content placed directly in DialogContent - #205
Conversation
DialogContent has no padding (so DialogFooter can bleed full-width), with padding delegated to DialogHeader/DialogBody/DialogFooter. Content dropped straight into DialogContent (skipping DialogBody) was therefore flush to the side edges and butted onto the footer — e.g. the destructive Banner in ConfirmDialog. Adds a safeguard: any direct child of DialogContent that isn't a dialog-* slot (header/body/footer/close) is inset with mx-4 my-2. Uses margin (not padding) so an element with its own background is inset as a whole, plus w-auto to override a child's w-full so the margins shrink it instead of overflowing. The close button gets an explicit dialog-close slot so it's excluded. Structured dialogs (Header/Body/Footer) are unchanged. Adds a RawContentPadding regression story asserting raw content stays inset and off the footer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
GitHub Actions
Inactive
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![unblocked[bot]](https://avatars.githubusercontent.com/in/166219?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found.
About Unblocked
Unblocked has been set up to automatically review your team's pull requests to identify genuine bugs and issues.
📖 Documentation — Learn more in our docs.
💬 Ask questions — Mention @unblocked to request a review or summary, or ask follow-up questions.
👍 Give feedback — React to comments with 👍 or 👎 to help us improve.
⚙️ Customize — Adjust settings in your preferences.
…feguard The inset safeguard matched any direct child whose data-slot didn't start with 'dialog-', which also caught Command (data-slot="command") placed directly in DialogContent by CommandDialog and ModelSelectorContent. Those intentionally pass p-0 for a full-bleed palette; the safeguard was insetting them (mx-4 my-2) and overriding size-full (w-auto), breaking both layouts. Narrow the selector to bare children only ([&>*:not([data-slot])]): a present data-slot marks a known component, left untouched. Raw text/elements still get the mx-4/my-2/w-auto inset. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
GitHub Actions
Inactive
|
Addressed the full-bleed regression flagged above ( Verified by measurement in Storybook:
|
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||
3 participants
SW-2528 — Dialog content missing paddings
Jira: SW-2528
What & why
DialogContenthas no padding of its own (soDialogFootercan bleed full-width with itsborder-t/bg-muted/ rounded bottom); padding is delegated toDialogHeader/DialogBody/DialogFooter. When content is dropped straight intoDialogContent— skippingDialogBody— it goes flush to the side edges and butts directly onto the footer. The kit's ownConfirmDialoghits this with its destructiveBanner.Fix
A safeguard on
DialogContent: any direct child that isn't adialog-*slot (header / body / footer / close) is inset withmx-4 my-2.Banner) is inset as a whole rather than just its textw-auto— overrides a child'sw-full(the higher-specificity variant selector wins) so the margins shrink it instead of overflowing the right edgedata-slot="dialog-close"so it's excludedDialogHeader/DialogBody/DialogFooter) are unchanged — they're excluded by theirdialog-*slot, so no double-padding and the footer still bleedsBefore / After —
ConfirmDialog(destructive)Before: the banner runs edge-to-edge and sits on the footer border. After: it's inset with a gap above and below; the footer still bleeds full-width.
Tests
Adds a
RawContentPaddingregression story (content placed directly inDialogContent) asserting it stays inset from the edges and off the footer. typecheck + lint clean; Dialog / ConfirmDialog / AlertDialog play tests pass.🤖 Generated with Claude Code