diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index 733e3f4c47c6a7..7cf4db9d6b3392 100644
--- a/docs/src/modules/components/AppLayoutDocs.js
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -14,6 +14,9 @@ import AdManager from 'docs/src/modules/components/AdManager';
 import AdGuest from 'docs/src/modules/components/AdGuest';
 import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter';
 
+const TOC_WIDTH = 175;
+const NAV_WIDTH = 240;
+
 const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
@@ -39,7 +42,10 @@ const useStyles = makeStyles((theme) => ({
   },
   toc: {
     [theme.breakpoints.up('sm')]: {
-      width: 'calc(100% - 175px)',
+      width: `calc(100% - ${TOC_WIDTH}px)`,
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: `calc(100% - ${TOC_WIDTH}px - ${NAV_WIDTH}px)`,
     },
   },
   disableToc: {