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

[blog] Improve the width of the layout #33706

Merged
merged 3 commits into from
Aug 5, 2022

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jul 30, 2022

I believe that the current width on medium size devices is buggy. The had overlooked the max width logic.

Implement #33670 (comment). I have also updated https://www.notion.so/mui-org/Blog-247ec2bff5fa46e799ef06a693c94917#b51c4255803840479e39cf2861af7ed8.

Preview: https://deploy-preview-33706--material-ui.netlify.app/blog/aggregation-functions/

@oliviertassinari oliviertassinari marked this pull request as ready for review July 30, 2022 09:51
@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label Jul 30, 2022
@@ -295,4 +305,4 @@ if (process.env.NODE_ENV !== 'production') {
TopLayoutBlog.propTypes = exactProp(TopLayoutBlog.propTypes);
}

export default styled(TopLayoutBlog)(styles);
export default TopLayoutBlog;
Copy link
Member Author

@oliviertassinari oliviertassinari Jul 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The BrandingProvider theme was not applied at this point yet. theme.spacing would be 8 vs. 10 pixels based on either the context is provided or not.

@@ -456,16 +456,6 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
},
},
},
MuiContainer: {
Copy link
Member Author

@oliviertassinari oliviertassinari Jul 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This contradicts the default values we have for the <Container> that we have in MUI System as best practices.

@mui-bot
Copy link

mui-bot commented Jul 30, 2022

No bundle size changes

Generated by 🚫 dangerJS against 6ad2a80

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.

Looks good! Just a small margin-bottom comment there.

docs/src/modules/components/TopLayoutBlog.js Outdated Show resolved Hide resolved
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.

Looks great!

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be great if you can capture the screenshots for before and after.

@oliviertassinari
Copy link
Member Author

oliviertassinari commented Aug 4, 2022

Would be great if you can capture the screenshots for before and after.

@siriwatknp I have tried, but it doesn't reproduce the experience well. The best is to open:

and compare with a screen width of 1000px and 1400px

@oliviertassinari oliviertassinari changed the title [blog] Improve max width [blog] Improve the width of the layout Aug 5, 2022
@oliviertassinari oliviertassinari merged commit c1257f9 into mui:master Aug 5, 2022
@oliviertassinari oliviertassinari deleted the blog-width-polish branch August 5, 2022 21:40
@oliviertassinari oliviertassinari added blog bug 🐛 Something doesn't work and removed docs Improvements or additions to the documentation labels Aug 5, 2022
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blog bug 🐛 Something doesn't work
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants