[blog] Improve the width of the layout (#33706)

mui · Aug 5, 2022 · c1257f9 · c1257f9
1 parent 3846a8f
commit c1257f9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -456,16 +456,6 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
           },
         },
       },
-      MuiContainer: {
-        styleOverrides: {
-          root: {
-            [theme.breakpoints.up('md')]: {
-              paddingLeft: theme.spacing(2),
-              paddingRight: theme.spacing(2),
-            },
-          },
-        },
-      },
       MuiDivider: {
         styleOverrides: {
           root: {

diff --git a/docs/src/modules/components/AppContainer.js b/docs/src/modules/components/AppContainer.js
@@ -2,9 +2,9 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 
-const StyledContainer = styled(Container)(({ theme }) => {
+const StyledAppContainer = styled(Container)(({ theme }) => {
   return {
-    paddingTop: 80 + 20,
+    paddingTop: 'calc(var(--MuiDocs-header-height) + 36px)',
     // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
     // 105ch ≈ 930px
     fontFamily: 'Arial',
@@ -17,5 +17,5 @@ const StyledContainer = styled(Container)(({ theme }) => {
 });
 
 export default function AppContainer(props) {
-  return <StyledContainer id="main-content" maxWidth={false} tabIndex={-1} {...props} />;
+  return <StyledAppContainer id="main-content" maxWidth={false} tabIndex={-1} {...props} />;
 }
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
@@ -96,6 +96,9 @@ const classes = {
   container: 'TopLayoutBlog-container',
 };
 
+// Replicate the value used by https://medium.com/, a trusted reference.
+const BLOG_MAX_WIDTH = 692;
+
 const styles = ({ theme }) => ({
   flexGrow: 1,
   background:
@@ -112,8 +115,14 @@ const styles = ({ theme }) => ({
   },
   [`& .${classes.container}`]: {
     paddingTop: 60 + 20,
-    marginBottom: theme.spacing(8),
-    maxWidth: `calc(740px + ${theme.spacing(12)})`,
+    marginBottom: theme.spacing(12),
+    maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(2 * 2)})`,
+    [theme.breakpoints.up('md')]: {
+      maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(3 * 2)})`,
+    },
+    [theme.breakpoints.up('lg')]: {
+      maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(8 * 2)})`,
+    },
     '& h1': {
       marginBottom: theme.spacing(3),
     },
@@ -197,6 +206,8 @@ const AuthorsContainer = styled('div')(({ theme }) => ({
   },
 }));
 
+const Root = styled('div')(styles);
+
 function TopLayoutBlog(props) {
   const { className, docs } = props;
   const { description, rendered, title, headers } = docs.en;
@@ -217,7 +228,7 @@ function TopLayoutBlog(props) {
             : 'https://mui.com/static/logo.png'
         }
       />
-      <div className={className}>
+      <Root className={className}>
         <AppContainer component="main" className={classes.container}>
           <Link
             href={ROUTES.blog}
@@ -281,7 +292,7 @@ function TopLayoutBlog(props) {
         <HeroEnd />
         <Divider />
         <AppFooter />
-      </div>
+      </Root>
     </BrandingProvider>
   );
 }
@@ -295,4 +306,4 @@ if (process.env.NODE_ENV !== 'production') {
   TopLayoutBlog.propTypes = exactProp(TopLayoutBlog.propTypes);
 }
 
-export default styled(TopLayoutBlog)(styles);
+export default TopLayoutBlog;
diff --git a/prettier.config.js b/prettier.config.js
@@ -15,7 +15,7 @@ module.exports = {
       files: ['docs/pages/blog/**/*.md'],
       options: {
         // otherwise code blocks overflow on the blog website
-        // The container is 676px
+        // The container is 692px
         printWidth: 82,
       },
     },