diff --git a/.changeset/org-switcher-trigger-avatar-radius.md b/.changeset/org-switcher-trigger-avatar-radius.md new file mode 100644 index 00000000000..6f181cf3999 --- /dev/null +++ b/.changeset/org-switcher-trigger-avatar-radius.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Reduce the organization avatar's border radius in the `OrganizationSwitcher` trigger so it stays proportional at the smaller trigger size. diff --git a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx index efad1c0b34e..4764fd99511 100644 --- a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx +++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx @@ -41,7 +41,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( focusRing={false} sx={[ t => ({ - padding: `${t.space.$1} ${t.space.$2}`, + padding: `${t.space.$1} ${t.space.$2} ${t.space.$1} ${t.space.$1}`, position: 'relative', '&[aria-expanded="true"]': { backgroundColor: 'var(--alpha)', @@ -62,6 +62,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( gap={3} size='xs' organization={organization} + avatarSx={t => ({ borderRadius: t.radii.$sm })} sx={{ maxWidth: '30ch' }} /> )}