fix(ui): Align legal consent checkbox in simple theme

In the simple theme, the legal consent checkbox would display a large
square when wrapped to a second line. This is because it's inside a flex
container which defaults align to `stretch`. Explicitly set it to
`align='start'` to match the behavior of `CheckboxField`.

Some other themes don't have this problem because they set an explicit
height and width. But that approach doesn't seem appropriate for
`simple`. This fix also fixes `neobrutalism` which had the same issue.

This doesn't break existing themes because if you already have a height,
the default align of `stretch` falls back to `start`. I also verified
this visually by checking each theme before and after the change.

Also add `simple` to the Sandbox for easy verification of the fix.

Author: dmoerner

.changeset/fair-singers-consent.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix the legal consent checkbox growing in size when its label wraps to a second line while using the `simple` theme. The checkbox is now aligned to the start of the row so it no longer stretches to match the label height.

packages/clerk-js/sandbox/app.ts

@@ -281,6 +281,8 @@ async function initControls() {
     .addBinding(PARAMS, 'baseTheme', {
       options: {
         default: '',
+        clerk: 'clerk',
+        simple: 'simple',
         dark: 'dark',
         shadesOfPurple: 'shadesOfPurple',
         neobrutalism: 'neobrutalism',
@@ -357,6 +359,8 @@ async function initControls() {
 }
 
 const themes: Record<string, unknown> = {
+  clerk: 'clerk',
+  simple: 'simple',
   dark,
   shadesOfPurple,
   neobrutalism,

packages/ui/src/elements/LegalConsentCheckbox.tsx

@@ -79,7 +79,10 @@ export const LegalCheckbox = (
 
   return (
     <Field.Root {...props}>
-      <Flex justify='center'>
+      <Flex
+        justify='center'
+        align='start'
+      >
         <Field.CheckboxIndicator
           elementDescriptor={descriptors.formFieldCheckboxInput}
           elementId={descriptors.formFieldInput.setId('legalAccepted')}