From cbc85ba67e72340e4d2cf2ae185f8b6b56df1f83 Mon Sep 17 00:00:00 2001 From: Liren Tu Date: Sat, 8 Aug 2026 09:47:26 -0700 Subject: [PATCH] fix(ui): allow legal links to wrap naturally within text- #1 Allow the "Terms of Service" and "Privacy Policy" links in the sign-up legal consent label to wrap naturally across lines. They were previously styled `display: inline-flex`, which forced each link to wrap as a single unbreakable unit, leaving a gap at the end of the preceding line. --- .changeset/wrap-links-inside-text.md | 5 +++++ packages/ui/src/elements/LegalConsentCheckbox.tsx | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/wrap-links-inside-text.md diff --git a/.changeset/wrap-links-inside-text.md b/.changeset/wrap-links-inside-text.md new file mode 100644 index 00000000000..67c8bae649b --- /dev/null +++ b/.changeset/wrap-links-inside-text.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Allow the "Terms of Service" and "Privacy Policy" links in the sign-up legal consent label to wrap naturally across lines. They were previously styled `display: inline-flex`, which forced each link to wrap as a single unbreakable unit, leaving a gap at the end of the preceding line. diff --git a/packages/ui/src/elements/LegalConsentCheckbox.tsx b/packages/ui/src/elements/LegalConsentCheckbox.tsx index a8410b23356..4154752d206 100644 --- a/packages/ui/src/elements/LegalConsentCheckbox.tsx +++ b/packages/ui/src/elements/LegalConsentCheckbox.tsx @@ -55,6 +55,7 @@ const LegalCheckboxLabel = (props: { termsUrl?: string; privacyPolicyUrl?: strin text={t(localizationKey)} isExternal sx={t => ({ + display: 'inline', textDecoration: 'underline', textUnderlineOffset: t.space.$1, })}