[alexcarpenter]

Description

Stacked on #10339.

• align moves from Card.Header to Card.Root. Card.Header reads it from CardContext, so <Card.Root align='center'> centers every header in the card, including headers from the reverification steps that sign-in reuses. data-align moves from .cl-card-header to .cl-card-root, and CardHeaderAlign / CardHeaderProps are replaced by CardAlign.
• The sign-in stories render <Card.Root align='center'>.
• The password step's identifier and edit button move from Card.Content into a second Card.Description in the header.
• A centered header now centers with text-align and lets its children take the card's width, and Card.Media centers itself. Content that doesn't wrap, like a long identifier, now truncates inside the card instead of overflowing it.

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]

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

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Nov 3, 2026 6:11pm UTC
swingset	Ready	Preview	Nov 3, 2026 6:11pm UTC

[changeset-bot]

🦋 Changeset detected

Latest commit: 818d7c6

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: clerk/javascript
• Branch: carp/mosaic-sign-in-card-align
• File: .coderabbit.yaml
• Commit: 818d7c6
• Layers: Repository YAML (base), Organization UI (inherited)
• Review profile: ASSERTIVE
• Plan: Team
• Run ID: 5045f128-4ead-42a1-9366-a0d5b833f189

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

CodeRabbit Verify

• Run CodeRabbit Verify to test the changes in this pull request.

[blacksmith-sh]

Password step: identifier in centered header

Before, the title and description sat left-aligned with the identifier in the body below. After, all three are centered in the header, the edit pencil beside the identifier.

_Merge-base

_{This PR 818d7c60}

Also checked · 4 match

Reused reverification step headers center
Edit button in header returns to start
Long identifier truncates inside card
Card.Media centers in centered card

_{Proof on 818d7c60 (from 2b5ae334) · Did Proof get it right? Yes · No}

View full Proof report