fix(clerk-js): Fix layout shift for Social block buttons - #1838
Conversation
🦋 Changeset detectedLatest commit: 9efbefb 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 |
octoper
changed the title
octoper
changed the title
731b4de to
b1fe1f5
Compare
b1fe1f5 to
1f884f3
Compare
|
@octoper I remember that we decided to change the social logos' dimensions to 20px by 20px, this PR seems to bring it back to 16x16, are we ok with this ? |
|
@panteliselef yeah you are correct, had some problems at first to keep it at 20px but I did manage to resolve them today. |
|
@panteliselef Just changed the sizes and also updated the videos. |
d34278c to
2394bf8
Compare
| size: { | ||
| sm: { [size]: theme.sizes.$3 }, | ||
| md: { [size]: theme.sizes.$4 }, | ||
| xs: { [size]: theme.sizes.$3 }, |
There was a problem hiding this comment.
❓ Are we using this somewhere ?
There was a problem hiding this comment.
Yeah, this is used here packages/clerk-js/src/ui/elements/Actions.tsx
panteliselef
left a comment
panteliselef
left a comment
There was a problem hiding this comment.
Thanks for the fix @octoper 🔧
|
This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
4 participants
Description
This PR fixes layout shift that is happening when Social block button is in loading state.
Before:
CleanShot.2023-10-09.at.17.06.33.mp4
After:
Layout.Shift.after.20px.mp4
Fixes JS-792
Checklist
npm testruns as expected.npm run buildruns as expected.Type of change
Packages affected
@clerk/clerk-js@clerk/clerk-react@clerk/nextjs@clerk/remix@clerk/types@clerk/themes@clerk/localizations@clerk/clerk-expo@clerk/backend@clerk/clerk-sdk-node@clerk/shared@clerk/fastify@clerk/chrome-extensiongatsby-plugin-clerkbuild/tooling/chore