fix(ui): Balance headings and prettify body text to reduce widows

[alexcarpenter]

Description

Reduces text widows and orphans in Clerk UI by setting text-wrap centrally on the two legacy text primitives: Heading uses text-wrap: balance (evens out line lengths on short titles) and Text uses text-wrap: pretty (prevents widows on longer body copy). Applying this in the primitives' base styles covers every heading and text element without per-component edits, and it's a progressive enhancement that falls back to normal wrapping in browsers without support. This is purely cosmetic and backwards-compatible.

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

• 📖 Refactoring / dependency upgrade / documentation

Summary by CodeRabbit

• Style
  • Improved heading wrapping for more balanced line lengths.
  • Improved body text wrapping to reduce awkward widows and orphans.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8b7232b

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 14, 2026 1:24pm
swingset	Ready	Preview, Comment	Jul 14, 2026 1:24pm

[coderabbitai]

📝 Walkthrough

Walkthrough

@clerk/ui now applies balanced wrapping to headings and pretty wrapping to body text, with a patch changeset documenting the behavior.

Changes

Text Wrapping Defaults

Layer / File(s)	Summary
Primitive wrapping styles packages/ui/src/primitives/Heading.tsx, packages/ui/src/primitives/Text.tsx, .changeset/text-wrap-widows.md	Heading defaults to textWrap: 'balance', Text defaults to textWrap: 'pretty', and the changeset documents the patch release.

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

Poem

I’m a rabbit with neatly wrapped prose,
Balanced headings in rows,
Pretty text hops along,
No lonely words go wrong—
Ears up for the changeset’s song!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly matches the PR’s main change: updating UI text wrapping for headings and body copy to reduce widows.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 8b7232b

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-14T13:26:16.182Z

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 8b7232b.}