Skip to content
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

Merged
merged 3 commits into from
Nov 27, 2023

Conversation

zanivan
Copy link
Contributor

@zanivan zanivan commented Nov 27, 2023

Removed fontWeight: '600' from the tabs to prevent the layout shift based on this comment

Screenshot 2023-11-27 at 13 48 52

👉 https://deploy-preview-40022--material-ui.netlify.app/joy-ui/getting-started/templates/profile-dashboard/

@zanivan zanivan added docs Improvements or additions to the documentation design: joy This is about Joy Design, please involve a visual or UX designer in the process labels Nov 27, 2023
@zanivan zanivan self-assigned this Nov 27, 2023
@zanivan zanivan marked this pull request as ready for review November 27, 2023 16:48
@mui-bot
Copy link

mui-bot commented Nov 27, 2023

Netlify deploy preview

https://deploy-preview-40022--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 1b90bcd

Copy link
Contributor

@danilo-leal danilo-leal left a 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!

Copy link
Contributor

@danilo-leal danilo-leal left a 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.

@zanivan
Copy link
Contributor Author

zanivan commented Nov 27, 2023

But I'd suggest working on the colors for the selected/non-selected states.

I've bumped up a bit the hover and text color, I think it got better indeed 👍

@zanivan zanivan merged commit 5680af3 into mui:master Nov 27, 2023
19 checks passed
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Nov 30, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 1, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 1, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design: joy This is about Joy Design, please involve a visual or UX designer in the process docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants