fix(ui,clerk-js,localizations): General OrganizationProfile UI fixes

[LauraBeatris]

Description

This PR introduces some UI fixes around OrganizationProfile, such as:

• Hide the Verified domains section when there are no domains and the user lacks permission to add them
  • Nowadays, it always shows that section even if there aren't domains and the user lacks the permission, so the button to add doesn't even render and therefore it stays an empty section
• Rename the Organization profile section to Profile for consistency with UserProfile
• Align the enterprise accounts section with the account data

Previously	After

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

Summary of changes

• Bug Fixes

  • Hide the “Verified domains” section when there are no domains to show and the user lacks permission to manage/add domains.

• Localization

  • Renamed the organization profile section title from “Organization Profile” to “Profile” across supported languages.

• Style

  • Improved alignment/spacing in user profile lists, including connected accounts, emails, and enterprise accounts.

• Tests

  • Updated and added domain visibility tests to cover permission-dependent rendering and empty-domain scenarios.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 17, 2026 8:27pm
swingset	Ready	Preview, Comment	Jun 17, 2026 8:27pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 65d54119-3013-40f4-9b52-d154686b4fdd

📥 Commits

Reviewing files that changed from the base of the PR and between 759d7b1 and 0d1b192.

📒 Files selected for processing (10)

• .changeset/frank-spoons-stick.md
• packages/localizations/src/bg-BG.ts
• packages/localizations/src/en-US.ts
• packages/localizations/src/uk-UA.ts
• packages/localizations/src/utils/enUS_v4.ts
• packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx
• packages/ui/src/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx
• packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx
• packages/ui/src/components/UserProfile/EmailsSection.tsx
• packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

---

📝 Walkthrough

Walkthrough

Adds permission-and-data-aware gating to OrganizationDomainsSection so the "Verified domains" section is hidden when no domains exist and the user lacks manage permission. Renames the profile section title from "Organization Profile" to "Profile" in four locale files. Fixes row alignment (align='center') in ConnectedAccountsSection, EmailsSection, and EnterpriseAccountsSection.

Changes

OrganizationProfile domain gating, section rename, and UserProfile alignment

Layer / File(s)	Summary
Verified Domains conditional rendering and tests packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx, packages/ui/src/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx	OrganizationDomainsSection fetches domains with infinite: true and checks canManageDomains via useProtect; returns null when the list is empty and the user cannot manage domains. Tests are updated for the read-only non-empty list case, a new empty-list/no-manage-permission hidden case, and the manage-permission visible case.
Profile section title rename across locales packages/localizations/src/en-US.ts, packages/localizations/src/bg-BG.ts, packages/localizations/src/uk-UA.ts, packages/localizations/src/utils/enUS_v4.ts	organizationProfile.start.profileSection.title changed from "Organization Profile" to "Profile" in all four locale files.
UserProfile row alignment fixes packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx, packages/ui/src/components/UserProfile/EmailsSection.tsx, packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx	Adds align='center' to Flex row wrappers in connected accounts, emails, and enterprise accounts sections; removes centered={false} from ProfileSection.Root; adds flexShrink: 0 to ProviderIcon.
Changeset .changeset/frank-spoons-stick.md	Marks @clerk/localizations, @clerk/clerk-js, and @clerk/ui as minor and documents the UI behavior changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• clerk/javascript#8795: Modifies the same OrganizationDomainsSection in OrganizationGeneralPage.tsx, adjusting domain subtitle text layout in the same UI area targeted by this PR.

Suggested labels

clerk-js

Suggested reviewers

• wobsoriano

Poem

🐇 Hop hop, the domains now hide away,
When empty lists and no perms hold sway.
"Profile" it's called — short and neat,
And rows align center, oh what a feat!
The warren is tidy, the UI complete! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: UI fixes to OrganizationProfile component including section hiding, naming consistency, and alignment improvements across the affected packages.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[changeset-bot]

🦋 Changeset detected

Latest commit: 0d1b192

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@clerk/localizations	Minor
@clerk/clerk-js	Minor
@clerk/ui	Minor
@clerk/chrome-extension	Patch
@clerk/expo	Patch
@clerk/swingset	Patch

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8898

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8898

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8898

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8898

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8898

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8898

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8898

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8898

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8898

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8898

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8898

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8898

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8898

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8898

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8898

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8898

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8898

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8898

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8898

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8898

commit: 0d1b192

[github-actions]

API Changes Report

Generated by Break Check on 2026-06-17T20:30:34.997Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on 0d1b192.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx (1)

139-147: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Defer domains fetching until the domains feature is confirmed enabled.

At Line 139, the domains query hook runs before the feature-flag guard at Line 146, so getDomains can be triggered even when domains are disabled. Please move the domains-fetching hook into a child component rendered only after the enabled checks pass.

Suggested refactor

 const OrganizationDomainsSection = () => {
const { organizationSettings } = useEnvironment();
- const { organization, domains } = useOrganization({ domains: { infinite: true } });- const canManageDomains = useProtect({ permission: 'org:sys_domains:manage' });+ const { organization } = useOrganization();
if (!organizationSettings || !organization) {
return null;
}
if (!organizationSettings.domains.enabled) {
return null;
}
+ return <OrganizationDomainsSectionContent />;+};++const OrganizationDomainsSectionContent = () => {+ const { domains } = useOrganization({ domains: { infinite: true } });+ const canManageDomains = useProtect({ permission: 'org:sys_domains:manage' });+
// Hide the section when there are no domains to show and the user cannot add
// any
if (!domains?.data?.length && !canManageDomains) {
return null;
}
return (
<ProfileSection.Root
title={localizationKeys('organizationProfile.profilePage.domainSection.title')}
id='organizationDomains'
centered={false}
>
...
</ProfileSection.Root>
);
};

🤖 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/components/OrganizationProfile/OrganizationGeneralPage.tsx`
around lines 139 - 147, The useOrganization hook with the domains query
parameter is being called before checking if domains are enabled, causing
unnecessary queries. Move the useOrganization hook call that includes the
domains configuration into a separate child component that is only rendered when
organizationSettings.domains.enabled is true. This ensures the domains fetching
is deferred until after the feature flag guard confirms domains are actually
enabled.

🧹 Nitpick comments (1)

packages/ui/src/components/UserProfile/EmailsSection.tsx (1)

64-64: ⚡ Quick win

Use align='center' prop for consistency across aligned sections.

EmailsSection applies alignItems: 'center' directly in sx, while ConnectedAccountsSection (line 162) and EnterpriseAccountsSection (line 177) both use the Flex align='center' prop. For consistency and maintainability, use the Flex variant prop instead of embedding the CSS property directly.

♻️ Proposed refactor for consistency

- <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$1, alignItems: 'center' })}>+ <Flex+ align='center'+ sx={t => ({ overflow: 'hidden', gap: t.space.$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/components/UserProfile/EmailsSection.tsx` at line 64, In the
EmailsSection component, the Flex component at line 64 uses alignItems: 'center'
inside the sx prop, which is inconsistent with how ConnectedAccountsSection and
EnterpriseAccountsSection apply vertical alignment. Remove the alignItems:
'center' property from the sx object in the Flex component and instead use the
align='center' prop directly on the Flex component to match the consistency
pattern used throughout the file.

🤖 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/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx`:
- Around line 177-180: Replace the hardcoded `await new Promise(r =>
setTimeout(r, 100))` delay in the test with `waitFor` to provide stable async
assertions. Remove the setTimeout promise and instead use `waitFor` to wait for
the expected DOM state where both 'Verified domains' and 'Add domain' text
elements should not be in the document, wrapping the expect statements within
the waitFor callback.
---
Outside diff comments:
In `@packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx`:
- Around line 139-147: The useOrganization hook with the domains query parameter
is being called before checking if domains are enabled, causing unnecessary
queries. Move the useOrganization hook call that includes the domains
configuration into a separate child component that is only rendered when
organizationSettings.domains.enabled is true. This ensures the domains fetching
is deferred until after the feature flag guard confirms domains are actually
enabled.
---
Nitpick comments:
In `@packages/ui/src/components/UserProfile/EmailsSection.tsx`:
- Line 64: In the EmailsSection component, the Flex component at line 64 uses
alignItems: 'center' inside the sx prop, which is inconsistent with how
ConnectedAccountsSection and EnterpriseAccountsSection apply vertical alignment.
Remove the alignItems: 'center' property from the sx object in the Flex
component and instead use the align='center' prop directly on the Flex component
to match the consistency pattern used throughout the file.

🪄 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), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 428a5065-485a-4208-bf9d-23ffe5ef5aea

📥 Commits

Reviewing files that changed from the base of the PR and between f4ecc13 and 3bd5c8a.

📒 Files selected for processing (10)

• .changeset/frank-spoons-stick.md
• packages/localizations/src/bg-BG.ts
• packages/localizations/src/en-US.ts
• packages/localizations/src/uk-UA.ts
• packages/localizations/src/utils/enUS_v4.ts
• packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx
• packages/ui/src/components/OrganizationProfile/__tests__/OrganizationGeneralPage.test.tsx
• packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx
• packages/ui/src/components/UserProfile/EmailsSection.tsx
• packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx