fix(clerk-js): Add size to avatar remove button to avoid shift

[alexcarpenter]

Description

Fixes layout shift that happens within the avatar remove experience since the button sizes differed. This PR updates the remove button size to match the upload button.

BEFORE

Screen.Recording.2025-10-21.at.10.42.11.AM.mov

AFTER

Screen.Recording.2025-10-21.at.10.41.26.AM.mov

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

• Style

  • Reduced the size of the avatar removal button to match the upload button for improved visual consistency and a cleaner avatar control layout.

• Chores

  • Added a patch release note documenting this UI sizing adjustment.

[changeset-bot]

🦋 Changeset detected

Latest commit: 12d9c49

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Oct 21, 2025 3:31pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

[coderabbitai]

Walkthrough

Added a UI sizing change: the avatar remove/destructive button in AvatarUploader now renders with size='xs'. No control flow, error handling, or behavioral logic changed.

Changes

Cohort / File(s)	Summary
Avatar Button Sizing packages/clerk-js/src/ui/elements/AvatarUploader.tsx	Add size='xs' prop to the avatar remove/destructive button, reducing its rendered size.
Release Changeset .changeset/funny-areas-draw.md	Add a changeset documenting a patch release and noting the UI size adjustment for the avatar remove button.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A tiny tweak, a quiet quest,
I nudge a button to its best.
Small paws, small size, a tidy cheer,
The uploader trimmed and crystal clear.
Hops of joy for changes near! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "fix(clerk-js): Add size to avatar remove button to avoid shift" directly and accurately describes the main change in the changeset. The title clearly identifies the component being modified (avatar remove button), the specific action taken (adding a size property), and the intended benefit (preventing layout shift). The title is concise, uses clear phrasing without vague terms, and follows conventional commit format. A teammate scanning the commit history would immediately understand that this fix addresses a UI layout issue with the avatar removal button.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch alexcarpenter/avatar-remove-button-size

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 93260ec and 81f4b4e.

📒 Files selected for processing (1)

• .changeset/funny-areas-draw.md (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

.changeset/**

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Automated releases must use Changesets.

Files:

• .changeset/funny-areas-draw.md

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Integration Tests (nextjs, chrome, 15)
• GitHub Check: Integration Tests (nextjs, chrome, 14)
• GitHub Check: Integration Tests (generic, chrome)
• GitHub Check: Integration Tests (localhost, chrome)
• GitHub Check: Integration Tests (quickstart, chrome)
• GitHub Check: semgrep-cloud-platform/scan

🔇 Additional comments (1)

.changeset/funny-areas-draw.md (1)

1-4: Changeset format and content are correct.

The changeset follows the proper Changesets convention:

• YAML front matter correctly specifies @clerk/clerk-js package with patch bump type
• Changelog message is clear and accurately describes the UI sizing fix
• Previously flagged typo ("consitent" → "consistent") has been corrected in line 4

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7041

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7041

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7041

@clerk/clerk-expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/clerk-react

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

@clerk/react-router

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

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7041

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7041

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7041

@clerk/upgrade

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

@clerk/vue

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

commit: 12d9c49

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 11f3714 and 93260ec.

📒 Files selected for processing (1)

• .changeset/funny-areas-draw.md (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

.changeset/**

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Automated releases must use Changesets.

Files:

• .changeset/funny-areas-draw.md

🪛 LanguageTool

.changeset/funny-areas-draw.md

[grammar] ~5-~5: Ensure spelling is correct
Context: ...Make avatar remove button size xs to be consitent with upload button sizing.

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: Formatting | Dedupe | Changeset
• GitHub Check: Build Packages
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: semgrep-cloud-platform/scan
• GitHub Check: semgrep-cloud-platform/scan

[tmilewski]

Just the one minor CR comment to fix before merge