-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
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
[joy-ui][templates] Fix layout shift on Profile template #40022
Conversation
Netlify deploy previewhttps://deploy-preview-40022--material-ui.netlify.app/ Bundle size report |
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.
Instead of removing the font-weight entirely here, why don't we put it above so it's applicable to the component in all states? It feels too thin the tabs with a regular weight, for some reason. And there would be no layout shift, too!
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.
Layout shift is fixed! 🤙 But I'd suggest working on the colors for the selected/non-selected states. On dark mode, specifically, they change very little — it's hard to notice!
Feel free to tackle it here or in another PR, though.
I've bumped up a bit the hover and text color, I think it got better indeed 👍 |
Removed
fontWeight: '600'
from the tabs to prevent the layout shift based on this comment👉 https://deploy-preview-40022--material-ui.netlify.app/joy-ui/getting-started/templates/profile-dashboard/