[docs-infra] Improve disableToc={true} support (#37931)

Co-authored-by: Danilo Leal <[email protected]>
mui · Jul 12, 2023 · 3ad3187 · 3ad3187
1 parent f95e2ce
commit 3ad3187
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
@@ -15,20 +15,22 @@ import AdManager from 'docs/src/modules/components/AdManager';
 import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter';
 import BackToTop from 'docs/src/modules/components/BackToTop';
 
+const TOC_WIDTH = 242;
+
 const Main = styled('main', {
   shouldForwardProp: (prop) => prop !== 'disableToc',
 })(({ disableToc, theme }) => ({
   display: 'grid',
   width: '100%',
   ...(disableToc
     ? {
-        [theme.breakpoints.up('lg')]: {
-          marginRight: '5%',
+        [theme.breakpoints.up('md')]: {
+          marginRight: TOC_WIDTH / 2,
         },
       }
     : {
         [theme.breakpoints.up('md')]: {
-          gridTemplateColumns: '1fr 242px',
+          gridTemplateColumns: `1fr ${TOC_WIDTH}px`,
         },
       }),
   '& .markdown-body .comment-link': {
@@ -37,13 +39,24 @@ const Main = styled('main', {
 }));
 
 const StyledAppContainer = styled(AppContainer, {
-  shouldForwardProp: (prop) => prop !== 'disableAd' && prop !== 'hasTabs',
-})(({ disableAd, hasTabs, theme }) => {
+  shouldForwardProp: (prop) => prop !== 'disableAd' && prop !== 'hasTabs' && prop !== 'disableToc',
+})(({ disableAd, hasTabs, disableToc, theme }) => {
   return {
     position: 'relative',
     // By default, a grid item cannot be smaller than the size of its content.
     // https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items
     minWidth: 0,
+    ...(disableToc
+      ? {
+          // 105ch ≈ 930px
+          maxWidth: `calc(105ch + ${TOC_WIDTH / 2}px)`,
+        }
+      : {
+          // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
+          fontFamily: 'Arial',
+          // 105ch ≈ 930px
+          maxWidth: '105ch',
+        }),
     ...(!disableAd && {
       ...(!hasTabs && {
         '&& .description': {
@@ -141,7 +154,7 @@ export default function AppLayoutDocs(props) {
             Render the TOCs first to avoid layout shift when the HTML is streamed.
             See https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ for more details.
           */}
-          <StyledAppContainer disableAd={disableAd} hasTabs={hasTabs}>
+          <StyledAppContainer disableAd={disableAd} hasTabs={hasTabs} disableToc={disableToc}>
             <ActionsDiv>
               <EditPage sourceLocation={location} />
             </ActionsDiv>