-
Notifications
You must be signed in to change notification settings - Fork 253
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(clerk-js): UI fixes for phone input and OTP inputs #3302
fix(clerk-js): UI fixes for phone input and OTP inputs #3302
Conversation
🦋 Changeset detectedLatest commit: dd3ec07 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
2ebd039
to
f047d0b
Compare
Did we check if these issues appear only without |
borderTopLeftRadius: 0, | ||
borderBottomLeftRadius: 0, | ||
paddingLeft: t.space.$1, | ||
'&:focus': { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about hover and active states?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hover and active states are not styled by default but we can include them as well
@desiprisg Yeah I have checked both and they had the same issues but those changes fixes them both |
f047d0b
to
dd3ec07
Compare
Description
This PR fixes 2 UI issues that were found when using
@tailwindcss/forms
, the first problem was that phone number had the country code flowing over the phone input and the other one was that the OTP where huge due tobox-sizing: content-box
Before
After
Checklist
npm test
runs as expected.npm run build
runs as expected.Type of change