fix(clerk-js): Improve checkbox label alignment (#4426)

clerk · Oct 29, 2024 · a06f1f3 · a06f1f3
1 parent 01258ed
commit a06f1f3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/.changeset/giant-roses-heal.md b/.changeset/giant-roses-heal.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Improve checkbox label alignment to account for wrapping labels.
diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx
@@ -221,6 +221,7 @@ const CheckboxIndicator = forwardRef<HTMLInputElement>((_, ref) => {
       focusRing={false}
       sx={t => ({
         width: 'fit-content',
+        flexShrink: 0,
         marginTop: t.space.$0x5,
       })}
     />

diff --git a/packages/clerk-js/src/ui/elements/LegalConsentCheckbox.tsx b/packages/clerk-js/src/ui/elements/LegalConsentCheckbox.tsx
@@ -68,10 +68,7 @@ export const LegalCheckbox = (
 
   return (
     <Field.Root {...props}>
-      <Flex
-        align='center'
-        justify='center'
-      >
+      <Flex justify='center'>
         <Field.CheckboxIndicator />
         <FormLabel
           elementDescriptor={descriptors.formFieldRadioLabel}