fix(ui): allow legal links to wrap naturally within text

[tuliren]

Description

On the sign-up "Legal consent" screen, the "I agree to the Terms of Service and Privacy Policy" label is wrapped awkwardly, because the two legal links are rendered as display: inline-flex, making each one an atomic inline box the browser cannot break inside. As a result, Privacy Policy always wrapped to its own line, leaving a large gap at the end of the preceding line.

This PR styles the links in the legal-consent label as display: inline, letting the text break at the last fitting word so the line fills the available width before wrapping. The change is scoped to the consent label's links via its existing sx, so no other component is affected.

To test the change:

• Run pnpm dev:sandbox
• Go to http://localhost:4000/sign-up
• You can see that the Private Policy link now wraps around by the space.

Before	After

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:

[changeset-bot]

🦋 Changeset detected

Latest commit: cbc85ba

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]

@tuliren is attempting to deploy a commit to the Clerk Production Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 7fd7977f-81f4-4adf-b3a6-7f7ad5be2dba

📥 Commits

Reviewing files that changed from the base of the PR and between 6464fe7 and cbc85ba.

📒 Files selected for processing (2)

• .changeset/wrap-links-inside-text.md
• packages/ui/src/elements/LegalConsentCheckbox.tsx

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• clerk/clerk_go (manual)
• clerk/dashboard (manual)
• clerk/accounts (manual)
• clerk/backoffice (manual)
• clerk/clerk (manual)
• clerk/clerk-docs (manual)
• clerk/cloudflare-workers (manual)

---

📝 Walkthrough

Walkthrough

The legal consent checkbox now styles rendered links with display: 'inline', allowing link text to wrap naturally across lines. A patch changeset documents this behavior for @clerk/ui.

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

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: allowing legal consent links to wrap naturally.
Description check	✅ Passed	The description directly explains the wrapping issue, the scoped styling change, and how to test it.
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.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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