chore(ui): Add ProfileCard.Page for UserProfile and OrganizationProfile#8602
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 0899b58 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
LauraBeatris
changed the base branch from
laura/add-self-serve-sso-org-profile
to
main
LauraBeatris
force-pushed
the
laura/org-profile-padding-changes-1
branch
from
3499e58 to
d9dc3cc
Compare
Contributor
📝 WalkthroughWalkthroughThis pull request introduces Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
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 `@packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx`:
- Around line 39-48: The breakpoint-specific styles for small screens are
clobbered because both conditional spreads in ProfileCardPage create a separate
[mqu.sm] object (the padding branch and the bleeding branch), so when both
padding and bleeding are true the latter replaces the former; fix by merging the
small-breakpoint objects instead of emitting duplicate [mqu.sm] keys—e.g., build
a single [mqu.sm] object that spreads in the padding styles and also spreads in
the bleeding margin styles (or compute a merged object before spreading) so both
padding and bleeding styles coexist when both flags are true.
🪄 Autofix (Beta)
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
Run ID: a70c9db9-6a76-48cd-bc3a-3a4a341a44cb
📒 Files selected for processing (17)
.changeset/chatty-maps-shine.mdpackages/ui/src/common/CustomPageContentContainer.tsxpackages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsxpackages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsxpackages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsxpackages/ui/src/components/OrganizationProfile/OrganizationMembers.tsxpackages/ui/src/components/OrganizationProfile/OrganizationPlansPage.tsxpackages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsxpackages/ui/src/components/Statements/StatementPage.tsxpackages/ui/src/components/UserProfile/APIKeysPage.tsxpackages/ui/src/components/UserProfile/AccountPage.tsxpackages/ui/src/components/UserProfile/BillingPage.tsxpackages/ui/src/components/UserProfile/PlansPage.tsxpackages/ui/src/components/UserProfile/SecurityPage.tsxpackages/ui/src/elements/ProfileCard/ProfileCardContent.tsxpackages/ui/src/elements/ProfileCard/ProfileCardPage.tsxpackages/ui/src/elements/ProfileCard/index.ts
Comment on lines
+39
to
+48
| [mqu.sm]: { | ||
| padding: `${theme.space.$8} ${theme.space.$5}`, | ||
| }, | ||
| }), | ||
| ...(bleeding && { | ||
| marginInlineStart: `calc(${theme.space.$8} * -1)`, | ||
| marginInlineEnd: `calc(${theme.space.$6} * -1)`, | ||
| [mqu.sm]: { | ||
| marginInline: `calc(${theme.space.$5} * -1)`, | ||
| }, |
Contributor
There was a problem hiding this comment.
Breakpoint styles are being overwritten when both padding and bleeding are enabled.
At Line 39 and Line 46, both conditional spreads write to [mqu.sm]. If both flags are true, the bleeding block replaces the padding block, so small-screen padding is lost.
Suggested fix
<Col
sx={theme => ({
...(padding && {
paddingTop: theme.space.$7,
paddingBottom: theme.space.$7,
paddingInlineStart: theme.space.$8,
paddingInlineEnd: theme.space.$6, //smaller because of stable scrollbar gutter on the parent
- [mqu.sm]: {
- padding: `${theme.space.$8} ${theme.space.$5}`,
- },
}),
...(bleeding && {
marginInlineStart: `calc(${theme.space.$8} * -1)`,
marginInlineEnd: `calc(${theme.space.$6} * -1)`,
- [mqu.sm]: {
- marginInline: `calc(${theme.space.$5} * -1)`,
- },
}),
+ [mqu.sm]: {
+ ...(padding && { padding: `${theme.space.$8} ${theme.space.$5}` }),
+ ...(bleeding && { marginInline: `calc(${theme.space.$5} * -1)` }),
+ },
})}
>🤖 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 `@packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx` around lines 39 -
48, The breakpoint-specific styles for small screens are clobbered because both
conditional spreads in ProfileCardPage create a separate [mqu.sm] object (the
padding branch and the bleeding branch), so when both padding and bleeding are
true the latter replaces the former; fix by merging the small-breakpoint objects
instead of emitting duplicate [mqu.sm] keys—e.g., build a single [mqu.sm] object
that spreads in the padding styles and also spreads in the bleeding margin
styles (or compute a merged object before spreading) so both padding and
bleeding styles coexist when both flags are true.
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@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: |
alexcarpenter
approved these changes
May 20, 2026
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
2 participants
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.
Description
Introduce separate
ProfileContentPageto allow for opt-out padding, an example being the new self-serve SSO page:Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change