fix(ui): Align legal consent checkbox in simple theme#8705
Merged
Conversation
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.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
Contributor
|
Snapi: no API changes detected in |
Contributor
📝 WalkthroughWalkthroughThis PR fixes the legal consent checkbox alignment in the Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
.changeset/fair-singers-consent.md (1)
5-5: 💤 Low valueConsider simplifying the wording.
The phrase "growing in size" could be shortened to just "growing" for conciseness: "Fix the legal consent checkbox growing when its label wraps..."
This is a minor style suggestion based on the static analysis hint. The current wording is clear and acceptable as-is.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.changeset/fair-singers-consent.md at line 5, Edit the changelog sentence that reads "Fix the legal consent checkbox growing in size when its label wraps to a second line while using the `simple` theme." and simplify the wording by replacing "growing in size" with "growing" so it reads "Fix the legal consent checkbox growing when its label wraps to a second line while using the `simple` theme." Keep the rest of the description unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In @.changeset/fair-singers-consent.md:
- Line 5: Edit the changelog sentence that reads "Fix the legal consent checkbox
growing in size when its label wraps to a second line while using the `simple`
theme." and simplify the wording by replacing "growing in size" with "growing"
so it reads "Fix the legal consent checkbox growing when its label wraps to a
second line while using the `simple` theme." Keep the rest of the description
unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 8ede4bf1-409f-4d49-b492-df125930873c
📒 Files selected for processing (3)
.changeset/fair-singers-consent.mdpackages/clerk-js/sandbox/app.tspackages/ui/src/elements/LegalConsentCheckbox.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
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 toalign='start'to match the behavior ofCheckboxField.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 fixesneobrutalismwhich had the same issue.This doesn't break existing themes because if you already have a height, the default align of
stretchfalls back tostart. I also verified this visually by checking each theme before and after the change.Also add
simpleto the Sandbox for easy verification of the fix.Fixes USER-5441.
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change