Skip to content

fix(ui): make icon social buttons match text button height#9058

Merged
alexcarpenter merged 1 commit into
mainfrom
social-button-height-mismatch
Jul 1, 2026
Merged

fix(ui): make icon social buttons match text button height#9058
alexcarpenter merged 1 commit into
mainfrom
social-button-height-mismatch

Conversation

@alexcarpenter

@alexcarpenter alexcarpenter commented Jul 1, 2026

Copy link
Copy Markdown
Member

Description

Fixes icon only social button height to be consistent with other control elements. It had a min height that made it roughly 2px taller than the other elements. Removed in favor of a wrapping element the uses lh unit to ensure consistent sizing.

BEFORE AFTER
Screenshot 2026-07-01 at 7 46 32 AM Screenshot 2026-07-01 at 7 45 41 AM
Preview Preview

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:

@vercel

vercel Bot commented Jul 1, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Jul 1, 2026 11:46am
swingset Ready Ready Preview, Comment Jul 1, 2026 11:46am

Request Review

@changeset-bot

changeset-bot Bot commented Jul 1, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: a6c01f3

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

This PR includes changesets to release 3 packages
Name Type
@clerk/ui Patch
@clerk/chrome-extension Patch
@clerk/swingset Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

This PR adjusts the SocialButtonIcon component in @clerk/ui so icon-only social buttons match the height of text-based social buttons. The icon is now wrapped in a Flex with minHeight: '1lh', and a changeset entry documents the patch.

Changes

Social Button Height Fix

Layer / File(s) Summary
Icon button height alignment
packages/ui/src/elements/SocialButtons.tsx
Replaces themed minHeight sx with sx={{ width: '100%' }} and wraps {icon} in a Flex using minHeight: '1lh' to align icon-only button height with text/block buttons.
Changeset entry
.changeset/social-icon-button-height.md
Adds a patch changeset for @clerk/ui describing the icon-only social button height fix.

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

Poem

A rabbit hops through rows so neat,
No icon button towers over its seat,
One line of height, both tall and small,
Now sit aligned, standing proud and tall! 🐰✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main UI fix: aligning icon-only social button height with text buttons.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch

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

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-07-01T11:48:39.430Z

Summary

Metric Count
Packages analyzed 19
Packages with changes 0
🔴 Breaking changes 0
🟡 Non-breaking changes 0
🟢 Additions 0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on a6c01f3.

@alexcarpenter alexcarpenter requested a review from a team July 1, 2026 11:48
@pkg-pr-new

pkg-pr-new Bot commented Jul 1, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: a6c01f3

@maxyinger maxyinger 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.

💅

@alexcarpenter alexcarpenter merged commit 8a30cfe into main Jul 1, 2026
59 checks passed
@alexcarpenter alexcarpenter deleted the social-button-height-mismatch branch July 1, 2026 15:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants