fix(ui): align dialog close icon, not its button box, with the corner inset - #9429
Conversation
… inset Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: ff0798d The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughUpdates dialog close-button insets for prompt, card, and panel surfaces. The documentation now describes offsets relative to the icon surface inset. An empty Changesets frontmatter file was added. Estimated code review effort: 1 (Trivial) | ~3 minutes Mergeability Score: 🟡 Moderate · up to The PR changes published UI behavior, but its changeset does not identify the owning package or provide a patch description, which may prevent the fix from being included correctly in release versioning and changelogs. Merge should wait for the changeset to be corrected. Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/dialog-close-icon-flush.md:
- Around line 1-2: Add a Changesets patch entry for the published package owning
packages/ui and include a concise release description of the dialog close-icon
fix; replace the empty frontmatter in dialog-close-icon-flush.md with the
required package-specific metadata.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: cec54996-5b26-4c06-99ab-f8df1b0121bf
📒 Files selected for processing (2)
.changeset/dialog-close-icon-flush.mdpackages/ui/src/mosaic/components/dialog/dialog.styles.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)clerk/clerk-ios(auto-detected)clerk/cli(auto-detected)clerk/clerk-android(auto-detected)
| --- | ||
| --- |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Add a package-specific patch changeset.
This file contains no package entry or release description. Because the change updates runtime behavior in packages/ui, add a patch entry for the owning published package and describe the dialog close-icon fix.
As per coding guidelines, Changesets must manage versioning and changelogs. Based on learnings, an empty changeset is acceptable only when no published package requires a release entry; this change is a runtime UI fix.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.changeset/dialog-close-icon-flush.md around lines 1 - 2, Add a Changesets
patch entry for the published package owning packages/ui and include a concise
release description of the dialog close-icon fix; replace the empty frontmatter
in dialog-close-icon-flush.md with the required package-specific metadata.
Sources: Coding guidelines, Learnings
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
2 participants
Description
The Dialog close button is absolutely positioned at each surface's corner inset, but the inset was measured to the button's outer edge. The button is a
smcircle — a 28px box with 6px of internal padding around its 16px icon — so the visible glyph sat 6px further down and inline-start than the surface padding, reading as misaligned.Each surface's inset in
closeInsetsis now reduced by that 6px (prompt/card:space['4']→space['2.5'],panel:space['4.5']→space['3']), so the icon edge lands flush with the surface padding while the button's hit target keeps its full size, hanging past the icon toward the corner.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
🤖 Generated with Claude Code