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

Merged
alexcarpenter merged 5 commits into
mainfrom
alexcarpenter/avatar-remove-button-size
Oct 21, 2025
Merged

fix(clerk-js): Add size to avatar remove button to avoid shift#7041
alexcarpenter merged 5 commits into
mainfrom
alexcarpenter/avatar-remove-button-size

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Oct 21, 2025•
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

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-botBot commented Oct 21, 2025•
edited
Loading

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Oct 21, 2025•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 3:31pm

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

@coderabbitai

coderabbitaiBot commented Oct 21, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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

pkg-pr-newBot commented Oct 21, 2025•
edited
Loading

Copy link
Copy Markdown

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[bot]
coderabbitaiBot reviewed Oct 21, 2025
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread.changeset/funny-areas-draw.md Outdated
tmilewski
tmilewski approved these changes Oct 21, 2025
View reviewed changes

@tmilewskitmilewski left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one minor CR comment to fix before merge

alexcarpenterand others added 2 commits October 21, 2025 11:21
@alexcarpenter@coderabbitai
Update .changeset/funny-areas-draw.md
30273d3
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@alexcarpenter
Update funny-areas-draw.md
81f4b4e
@alexcarpenter
alexcarpenter enabled auto-merge (squash) October 21, 2025 15:34
@alexcarpenter
alexcarpenter merged commit 3235626 into mainOct 21, 2025
39 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/avatar-remove-button-size branch October 21, 2025 15:35
@clerk-cookieclerk-cookie mentioned this pull request Oct 21, 2025
Merged
NicolasLopes7 pushed a commit that referenced this pull request Oct 23, 2025
@alexcarpenter@coderabbitai@NicolasLopes7
fix(clerk-js): Add size to avatar remove button to avoid shift (#7041)
b487ae6
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes
+1 more reviewer
@octoperoctoperoctoper approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

clerk-js

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@octoper@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(clerk-js): Add size to avatar remove button to avoid shift - #7041
Merged
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Oct 21, 2025
Merged
fix(clerk-js): Add size to avatar remove button to avoid shift#7041
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 3:31pm
💡 Enable Vercel Agent with $100 free credit for automated AI reviews
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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
pkg-pr-newBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

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[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Comment thread.changeset/funny-areas-draw.md
Outdated

tmilewski
tmilewski
approved these changes
Oct 21, 2025
View reviewed changes
@tmilewskitmilewski
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one minor CR comment to fix before merge
alexcarpenterand others
added 2 commits
October 21, 2025 11:21
@alexcarpenter@coderabbitai
Update .changeset/funny-areas-draw.md
30273d3
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@alexcarpenter
Update funny-areas-draw.md
81f4b4e
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
October 21, 2025 15:34
@alexcarpenter
alexcarpenter
merged commit 3235626
into
mainOct 21, 2025

39 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/avatar-remove-button-size

branch
October 21, 2025 15:35
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 21, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@coderabbitai@NicolasLopes7
fix(clerk-js): Add size to avatar remove button to avoid shift (#7041)
b487ae6
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@octoperoctoperoctoper approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@octoper@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): Add size to avatar remove button to avoid shift - #7041
Merged
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Oct 21, 2025
Merged
fix(clerk-js): Add size to avatar remove button to avoid shift#7041
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 3:31pm
💡 Enable Vercel Agent with $100 free credit for automated AI reviews
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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
pkg-pr-newBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

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[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Comment thread.changeset/funny-areas-draw.md
Outdated

tmilewski
tmilewski
approved these changes
Oct 21, 2025
View reviewed changes
@tmilewskitmilewski
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one minor CR comment to fix before merge
alexcarpenterand others
added 2 commits
October 21, 2025 11:21
@alexcarpenter@coderabbitai
Update .changeset/funny-areas-draw.md
30273d3
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@alexcarpenter
Update funny-areas-draw.md
81f4b4e
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
October 21, 2025 15:34
@alexcarpenter
alexcarpenter
merged commit 3235626
into
mainOct 21, 2025

39 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/avatar-remove-button-size

branch
October 21, 2025 15:35
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 21, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@coderabbitai@NicolasLopes7
fix(clerk-js): Add size to avatar remove button to avoid shift (#7041)
b487ae6
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@octoperoctoperoctoper approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@octoper@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): Add size to avatar remove button to avoid shift - #7041
Merged
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Oct 21, 2025
Merged
fix(clerk-js): Add size to avatar remove button to avoid shift#7041
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 3:31pm
💡 Enable Vercel Agent with $100 free credit for automated AI reviews
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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
pkg-pr-newBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

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[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Comment thread.changeset/funny-areas-draw.md
Outdated

tmilewski
tmilewski
approved these changes
Oct 21, 2025
View reviewed changes
@tmilewskitmilewski
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one minor CR comment to fix before merge
alexcarpenterand others
added 2 commits
October 21, 2025 11:21
@alexcarpenter@coderabbitai
Update .changeset/funny-areas-draw.md
30273d3
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@alexcarpenter
Update funny-areas-draw.md
81f4b4e
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
October 21, 2025 15:34
@alexcarpenter
alexcarpenter
merged commit 3235626
into
mainOct 21, 2025

39 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/avatar-remove-button-size

branch
October 21, 2025 15:35
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 21, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@coderabbitai@NicolasLopes7
fix(clerk-js): Add size to avatar remove button to avoid shift (#7041)
b487ae6
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@octoperoctoperoctoper approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@octoper@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(clerk-js): Add size to avatar remove button to avoid shift - #7041
Merged
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Oct 21, 2025
Merged
fix(clerk-js): Add size to avatar remove button to avoid shift#7041
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 3:31pm
💡 Enable Vercel Agent with $100 free credit for automated AI reviews
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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
pkg-pr-newBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

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[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Comment thread.changeset/funny-areas-draw.md
Outdated

tmilewski
tmilewski
approved these changes
Oct 21, 2025
View reviewed changes
@tmilewskitmilewski
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one minor CR comment to fix before merge
alexcarpenterand others
added 2 commits
October 21, 2025 11:21
@alexcarpenter@coderabbitai
Update .changeset/funny-areas-draw.md
30273d3
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@alexcarpenter
Update funny-areas-draw.md
81f4b4e
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
October 21, 2025 15:34
@alexcarpenter
alexcarpenter
merged commit 3235626
into
mainOct 21, 2025

39 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/avatar-remove-button-size

branch
October 21, 2025 15:35
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 21, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@coderabbitai@NicolasLopes7
fix(clerk-js): Add size to avatar remove button to avoid shift (#7041)
b487ae6
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@octoperoctoperoctoper approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@octoper@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): Add size to avatar remove button to avoid shift - #7041
Merged
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Oct 21, 2025
Merged
fix(clerk-js): Add size to avatar remove button to avoid shift#7041
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 3:31pm
💡 Enable Vercel Agent with $100 free credit for automated AI reviews
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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
pkg-pr-newBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

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[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Comment thread.changeset/funny-areas-draw.md
Outdated

tmilewski
tmilewski
approved these changes
Oct 21, 2025
View reviewed changes
@tmilewskitmilewski
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one minor CR comment to fix before merge
alexcarpenterand others
added 2 commits
October 21, 2025 11:21
@alexcarpenter@coderabbitai
Update .changeset/funny-areas-draw.md
30273d3
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@alexcarpenter
Update funny-areas-draw.md
81f4b4e
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
October 21, 2025 15:34
@alexcarpenter
alexcarpenter
merged commit 3235626
into
mainOct 21, 2025

39 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/avatar-remove-button-size

branch
October 21, 2025 15:35
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 21, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@coderabbitai@NicolasLopes7
fix(clerk-js): Add size to avatar remove button to avoid shift (#7041)
b487ae6
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@octoperoctoperoctoper approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@octoper@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): Add size to avatar remove button to avoid shift - #7041
Merged
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Oct 21, 2025
Merged
fix(clerk-js): Add size to avatar remove button to avoid shift#7041
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 3:31pm
💡 Enable Vercel Agent with $100 free credit for automated AI reviews
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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
pkg-pr-newBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

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[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Comment thread.changeset/funny-areas-draw.md
Outdated

tmilewski
tmilewski
approved these changes
Oct 21, 2025
View reviewed changes
@tmilewskitmilewski
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one minor CR comment to fix before merge
alexcarpenterand others
added 2 commits
October 21, 2025 11:21
@alexcarpenter@coderabbitai
Update .changeset/funny-areas-draw.md
30273d3
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@alexcarpenter
Update funny-areas-draw.md
81f4b4e
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
October 21, 2025 15:34
@alexcarpenter
alexcarpenter
merged commit 3235626
into
mainOct 21, 2025

39 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/avatar-remove-button-size

branch
October 21, 2025 15:35
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 21, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@coderabbitai@NicolasLopes7
fix(clerk-js): Add size to avatar remove button to avoid shift (#7041)
b487ae6
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@octoperoctoperoctoper approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@octoper@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(clerk-js): Add size to avatar remove button to avoid shift - #7041
Merged
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Oct 21, 2025
Merged
fix(clerk-js): Add size to avatar remove button to avoid shift#7041
alexcarpenter merged 5 commits into
mainfrom 
alexcarpenter/avatar-remove-button-size
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 3:31pm
💡 Enable Vercel Agent with $100 free credit for automated AI reviews
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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
pkg-pr-newBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

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[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Comment thread.changeset/funny-areas-draw.md
Outdated

tmilewski
tmilewski
approved these changes
Oct 21, 2025
View reviewed changes
@tmilewskitmilewski
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one minor CR comment to fix before merge
alexcarpenterand others
added 2 commits
October 21, 2025 11:21
@alexcarpenter@coderabbitai
Update .changeset/funny-areas-draw.md
30273d3
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@alexcarpenter
Update funny-areas-draw.md
81f4b4e
@alexcarpenter
alexcarpenter
enabled auto-merge (squash)
October 21, 2025 15:34
@alexcarpenter
alexcarpenter
merged commit 3235626
into
mainOct 21, 2025

39 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/avatar-remove-button-size

branch
October 21, 2025 15:35
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 21, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@coderabbitai@NicolasLopes7
fix(clerk-js): Add size to avatar remove button to avoid shift (#7041)
b487ae6
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@octoperoctoperoctoper approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@octoper@clerk-cookie