fix(ui): Fix OrganizationSwitcher avatar flash and polish popover styling

[maxyinger]

Description

• makes org switcher row heights consistent (was like 3px off before)
• adds sticky open style to popover trigger (standard ala vercel & notion for popovers)
• removes avatar flash on first render of org popover (more noticeable on dark mode, screenshot of the frame below)

Before	After

Follow up PR imporving popover anims here

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

• New Features
  • Improved the organization switcher’s open state with clearer visual highlighting.
  • Made newly loaded avatars appear more smoothly on first display.
• Bug Fixes
  • Reduced brief background flashing when avatars mount.
  • Aligned the “Create organization” action row with the rest of the menu items for a more consistent layout.

[changeset-bot]

🦋 Changeset detected

Latest commit: 412b25f

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 9, 2026 12:31am
swingset	Ready	Preview, Comment	Jul 9, 2026 12:31am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR patches @clerk/ui's <OrganizationSwitcher /> with three styling adjustments: synchronous avatar image decoding to avoid a background flash, highlighted trigger styling when expanded, and aligned padding/icon sizing for the "Create organization" action row. A changeset documents these changes.

Changes

OrganizationSwitcher Polish

Layer / File(s)	Summary
Trigger expanded highlight packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx	Adds sx styling for aria-expanded="true" state, setting background and accent colors.
Action row sizing packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx	Adjusts button padding and icon box height to match other list row heights.
Avatar sync decoding packages/ui/src/elements/Avatar.tsx	Sets decoding="sync" on the avatar's Image element with explanatory comments to avoid a first-render flash.
Changeset .changeset/org-switcher-polish.md	Documents the patch release covering all three adjustments.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Poem

Hop, hop, a trigger glows so bright,
Avatars decode before first light,
Rows aligned, no bumps in sight,
A tiny patch, done just right,
🐰✨ Ship it tonight!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main user-facing changes: fixing the avatar flash and polishing OrganizationSwitcher popover styling.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9112

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9112

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9112

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 412b25f

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-09T00:34:28.264Z

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 412b25f.}

[alexcarpenter]

This is used throughout the components, so a org profiles members tab has this used in the table. Do you think this is ok? I am not to familiar with the impacts of usage here.

[alexcarpenter]

💯