fix(apollo-wind): anchor dialog close button inside the dialog - #1027
Conversation
d1e3417 switched DialogContent from `fixed` + transform centering to a flex child of DialogOverlay, which left the content statically positioned. The close button's `absolute top-4 right-4` then resolved against DialogOverlay (`fixed inset-0`), rendering the X in the top-right corner of the page instead of the dialog. Add `relative` to DialogContent to restore it as the containing block. Also add `cursor-pointer` to the close button: Tailwind v4 dropped the default pointer cursor on buttons, so the X did not read as clickable the way the Button variants (which set it explicitly) do. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Fixes @uipath/apollo-wind Dialog so the close button (X) positions relative to the dialog content (not the viewport) after the earlier layout change that made DialogContent a static element.
Changes:
- Add
relativetoDialogContentso the absolutely positioned close button anchors inside the dialog content. - Add
cursor-pointer(anddisabled:cursor-default) to the close button for correct affordance under Tailwind v4 preflight behavior.
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Aug 07, 2026, 11:24:56 AM |
Problem
The
Dialogclose button (X) rendered in the top-right corner of the page instead of inside the dialog.Root cause
Commit d1e3417 ("switch dialog from transform to flex positioning") changed
DialogContentfromfixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]to a plain flex child ofDialogOverlay. Droppingfixedleft the content statically positioned.The close button is
absolute top-4 right-4, and an absolutely positioned element anchors to its nearest positioned ancestor. With the content static, that becameDialogOverlay(fixed inset-0), i.e. the viewport. Sotop-4 right-4meant "16px from the top-right of the page."Measured in the browser before the fix, at 1200px wide: the X sat at
top:16, right:1184while the dialog occupied344-856 x 442-782, andoffsetParentwasdialog-overlay.alert-dialog.tsxandsheet.tsxare unaffected; their content is stillfixed.Changes
Both in
packages/apollo-wind/src/components/ui/dialog.tsx:relativeonDialogContentrestores it as the containing block, which is what the originalfixedvariant provided.cursor-pointeron the close button (plusdisabled:cursor-default). Tailwind v4 dropped the browser defaultcursor: pointeron buttons, which is why this repo'sButtonvariants set it explicitly. The hand-written X never got it, so it did not read as clickable next to the footer buttons.Validation
Verified in Storybook with Playwright against this branch:
offsetParentis nowdialog-content.cursorcomputes topointeron the button and its SVG; hit-testing at the X's center returns the button, so the pointer shows on hover.position: relative,cursor: pointer, inset 17/17.dialog/alert-dialog/sheet; Biome clean.Note on stacking context
Since the content also carries
z-50, addingrelativemeans it now forms a stacking context (a static element ignoresz-index, so it previously did not). This matches the pre-d1e34176 behavior and matchesalert-dialog/sheet. Portaled children such as popovers render tobody, so they are unaffected.Follow-up, not in this PR
sheet.tsx:64has the same missingcursor-pointeron its close button. Its positioning is correct. Left out to keep this PR scoped; happy to fold it in.🤖 Generated with Claude Code