diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js
index 6b14c65b3d8a95..dddc72c6ce5da8 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.js
+++ b/docs/src/pages/components/drawers/ClippedDrawer.js
@@ -33,6 +33,7 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
     padding: theme.spacing(3),
   },
+  // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
 }));
 
diff --git a/docs/src/pages/components/drawers/ClippedDrawer.tsx b/docs/src/pages/components/drawers/ClippedDrawer.tsx
index 8487ef1f5ae252..0b7d7142863a7b 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.tsx
+++ b/docs/src/pages/components/drawers/ClippedDrawer.tsx
@@ -34,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) =>
       flexGrow: 1,
       padding: theme.spacing(3),
     },
+    // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
   }),
 );
diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js
index 344b3443f65f43..a5efd14879b779 100644
--- a/docs/src/pages/components/drawers/MiniDrawer.js
+++ b/docs/src/pages/components/drawers/MiniDrawer.js
@@ -73,6 +73,7 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
     justifyContent: 'flex-end',
     padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
     ...theme.mixins.toolbar,
   },
   content: {
diff --git a/docs/src/pages/components/drawers/MiniDrawer.tsx b/docs/src/pages/components/drawers/MiniDrawer.tsx
index c43489299ad14c..04643d359c9c77 100644
--- a/docs/src/pages/components/drawers/MiniDrawer.tsx
+++ b/docs/src/pages/components/drawers/MiniDrawer.tsx
@@ -74,6 +74,7 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: 'center',
       justifyContent: 'flex-end',
       padding: theme.spacing(0, 1),
+      // necessary for content to be below app bar
       ...theme.mixins.toolbar,
     },
     content: {
diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.js b/docs/src/pages/components/drawers/PermanentDrawerLeft.js
index fb6238845f276c..07b0625f21bbea 100644
--- a/docs/src/pages/components/drawers/PermanentDrawerLeft.js
+++ b/docs/src/pages/components/drawers/PermanentDrawerLeft.js
@@ -30,6 +30,7 @@ const useStyles = makeStyles(theme => ({
   drawerPaper: {
     width: drawerWidth,
   },
+  // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
   content: {
     flexGrow: 1,
diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx b/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx
index e30ce6531332f2..77e99ad4896f91 100644
--- a/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx
+++ b/docs/src/pages/components/drawers/PermanentDrawerLeft.tsx
@@ -31,6 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
     },
+    // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
     content: {
       flexGrow: 1,
diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.js b/docs/src/pages/components/drawers/PermanentDrawerRight.js
index d3db785afb9590..a60e2a4d547ca3 100644
--- a/docs/src/pages/components/drawers/PermanentDrawerRight.js
+++ b/docs/src/pages/components/drawers/PermanentDrawerRight.js
@@ -30,6 +30,7 @@ const useStyles = makeStyles(theme => ({
   drawerPaper: {
     width: drawerWidth,
   },
+  // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
   content: {
     flexGrow: 1,
diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.tsx b/docs/src/pages/components/drawers/PermanentDrawerRight.tsx
index bc6f11d705a1ca..4159ebfcc09e4f 100644
--- a/docs/src/pages/components/drawers/PermanentDrawerRight.tsx
+++ b/docs/src/pages/components/drawers/PermanentDrawerRight.tsx
@@ -31,6 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
     },
+    // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
     content: {
       flexGrow: 1,
diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.js b/docs/src/pages/components/drawers/PersistentDrawerLeft.js
index a5c0517d7d0aac..860bd7ea260e43 100644
--- a/docs/src/pages/components/drawers/PersistentDrawerLeft.js
+++ b/docs/src/pages/components/drawers/PersistentDrawerLeft.js
@@ -55,6 +55,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
     ...theme.mixins.toolbar,
     justifyContent: 'flex-end',
   },
diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx b/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx
index 7334e7f00e8060..b9a9a6428c7d32 100644
--- a/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx
+++ b/docs/src/pages/components/drawers/PersistentDrawerLeft.tsx
@@ -56,6 +56,7 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       alignItems: 'center',
       padding: theme.spacing(0, 1),
+      // necessary for content to be below app bar
       ...theme.mixins.toolbar,
       justifyContent: 'flex-end',
     },
diff --git a/docs/src/pages/components/drawers/PersistentDrawerRight.js b/docs/src/pages/components/drawers/PersistentDrawerRight.js
index 6d9e6b38b6989e..2f03f70b8a61fe 100644
--- a/docs/src/pages/components/drawers/PersistentDrawerRight.js
+++ b/docs/src/pages/components/drawers/PersistentDrawerRight.js
@@ -55,6 +55,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
     ...theme.mixins.toolbar,
     justifyContent: 'flex-start',
   },
diff --git a/docs/src/pages/components/drawers/PersistentDrawerRight.tsx b/docs/src/pages/components/drawers/PersistentDrawerRight.tsx
index b7c4d387247c16..31fed42fc3990f 100644
--- a/docs/src/pages/components/drawers/PersistentDrawerRight.tsx
+++ b/docs/src/pages/components/drawers/PersistentDrawerRight.tsx
@@ -56,6 +56,7 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       alignItems: 'center',
       padding: theme.spacing(0, 1),
+      // necessary for content to be below app bar
       ...theme.mixins.toolbar,
       justifyContent: 'flex-start',
     },
diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js
index f64121475bf98b..bcc1162e6c6494 100644
--- a/docs/src/pages/components/drawers/ResponsiveDrawer.js
+++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js
@@ -41,6 +41,7 @@ const useStyles = makeStyles(theme => ({
       display: 'none',
     },
   },
+  // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
   drawerPaper: {
     width: drawerWidth,
diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
index 85acc46c622967..2b646584dba6c4 100644
--- a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
@@ -41,6 +41,7 @@ const useStyles = makeStyles((theme: Theme) =>
         display: 'none',
       },
     },
+    // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
     drawerPaper: {
       width: drawerWidth,