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, })}