fix(ui): Update org switcher avatar alignment and radii by alexcarpenter · Pull Request #9148 · clerk/javascript

alexcarpenter · 2026-07-13T19:30:19Z

Description

Reduce left padding to be consistent with block padding
Fix avatar radii sizing

BEFORE	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

Summary by CodeRabbit

Style
- Improved organization switcher trigger spacing for better small-size alignment.
- Updated organization avatar styling to use a smaller, more proportional border radius in the switcher trigger.

vercel · 2026-07-13T19:30:25Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 13, 2026 7:39pm
swingset	Ready	Preview, Comment	Jul 13, 2026 7:39pm

changeset-bot · 2026-07-13T19:30:26Z

🦋 Changeset detected

Latest commit: 5839078

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

coderabbitai · 2026-07-13T19:33:05Z

📝 Walkthrough

Walkthrough

Updated the organization switcher trigger’s padding pattern, applied a small border radius to organization avatars, and added a patch changeset.

Changes

Organization switcher styling

Layer / File(s)	Summary
Trigger spacing and avatar styling `packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx`, `.changeset/org-switcher-trigger-avatar-radius.md`	Uses four-value theme spacing for padding, passes a theme-based avatar border-radius override to `OrganizationPreview`, and records a patch release.

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

Poem

A bunny hopped through spacing bright,
Four tiny values made things right.
The avatar wore a rounded trim,
A polished look from edge to brim.
“Ship it!” thumped my paws with glee.

🚥 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 clearly matches the main UI changes: org switcher alignment/padding and avatar radius adjustments.
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.

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

github-actions · 2026-07-13T19:33:51Z

API Changes Report

Generated by Break Check on 2026-07-13T19:40:18.588Z

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 5839078.}

pkg-pr-new · 2026-07-13T19:34:00Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 5839078

coderabbitai

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/org-switcher-trigger-avatar-radius.md:
- Line 5: Update the changeset release note for the OrganizationSwitcher trigger
to document both user-visible changes: the reduced avatar border radius and the
accompanying left-padding adjustment. Keep the existing avatar-radius
description and add the padding change without altering unrelated changeset
metadata.

🪄 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 Plus

Run ID: f3394a7a-e995-40be-93b4-1b06b2491868

📥 Commits

Reviewing files that changed from the base of the PR and between c60d783 and 5839078.

📒 Files selected for processing (1)

.changeset/org-switcher-trigger-avatar-radius.md

coderabbitai · 2026-07-13T19:40:12Z

+'@clerk/ui': patch
+---
+
+Reduce the organization avatar's border radius in the `OrganizationSwitcher` trigger so it stays proportional at the smaller trigger size.


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Document the trigger padding change in the changeset.

The release note mentions the avatar-radius adjustment but omits the accompanying left-padding change. Please describe both user-visible updates so the @clerk/ui changelog accurately reflects this patch.

This follows the stated PR objective, which includes both trigger padding and avatar-radius changes.

🤖 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/org-switcher-trigger-avatar-radius.md at line 5, Update the changeset release note for the OrganizationSwitcher trigger to document both user-visible changes: the reduced avatar border radius and the accompanying left-padding adjustment. Keep the existing avatar-radius description and add the padding change without altering unrelated changeset metadata.

maxyinger

gah. Good catch 🚀

fix(ui): Update org switcher avatar alignment and radii

c60d783

github-actions Bot added the ui label Jul 13, 2026

vercel Bot deployed to Preview – swingset July 13, 2026 19:31 View deployment

add changeset

5839078

vercel Bot deployed to Preview – clerk-js-sandbox July 13, 2026 19:37 View deployment

vercel Bot deployed to Preview – swingset July 13, 2026 19:39 View deployment

coderabbitai Bot reviewed Jul 13, 2026

View reviewed changes

maxyinger approved these changes Jul 13, 2026

View reviewed changes

alexcarpenter merged commit 6cc1890 into main Jul 13, 2026
53 checks passed

alexcarpenter deleted the carp/fix-org-switcher-trigger-avatar branch July 13, 2026 20:30

clerk-cookie mentioned this pull request Jul 13, 2026

ci(repo): Version packages #9141

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): Update org switcher avatar alignment and radii#9148

fix(ui): Update org switcher avatar alignment and radii#9148
alexcarpenter merged 2 commits into
mainfrom
carp/fix-org-switcher-trigger-avatar

alexcarpenter commented Jul 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 13, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

github-actions Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 13, 2026

Uh oh!

maxyinger left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

alexcarpenter commented Jul 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

github-actions Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

API Changes Report

Summary

No API Changes Detected

Uh oh!

pkg-pr-new Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

maxyinger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alexcarpenter commented Jul 13, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Jul 13, 2026 •

edited

Loading

changeset-bot Bot commented Jul 13, 2026 •

edited

Loading

coderabbitai Bot commented Jul 13, 2026 •

edited

Loading

github-actions Bot commented Jul 13, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 13, 2026 •

edited

Loading