diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js
index 667239fadf1c9a..1570d526c910d2 100644
--- a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js
+++ b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js
@@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({
     },
   },
   searchIcon: {
-    width: theme.spacing(7),
+    padding: theme.spacing(0, 2),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -56,11 +56,13 @@ const useStyles = makeStyles(theme => ({
     color: 'inherit',
   },
   inputInput: {
-    padding: theme.spacing(1, 1, 1, 7),
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('md')]: {
-      width: 200,
+      width: '20ch',
     },
   },
   sectionDesktop: {
diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx b/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
index 2241c3c641bd6b..0b6108df37b215 100644
--- a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
+++ b/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     searchIcon: {
-      width: theme.spacing(7),
+      padding: theme.spacing(0, 2),
       height: '100%',
       position: 'absolute',
       pointerEvents: 'none',
@@ -57,11 +57,13 @@ const useStyles = makeStyles((theme: Theme) =>
       color: 'inherit',
     },
     inputInput: {
-      padding: theme.spacing(1, 1, 1, 7),
+      padding: theme.spacing(1, 1, 1, 0),
+      // vertical padding + font size from searchIcon
+      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
       transition: theme.transitions.create('width'),
       width: '100%',
       [theme.breakpoints.up('md')]: {
-        width: 200,
+        width: '20ch',
       },
     },
     sectionDesktop: {
diff --git a/docs/src/pages/components/app-bar/SearchAppBar.js b/docs/src/pages/components/app-bar/SearchAppBar.js
index e1e289ad5709e6..b6e29ca868a8a2 100644
--- a/docs/src/pages/components/app-bar/SearchAppBar.js
+++ b/docs/src/pages/components/app-bar/SearchAppBar.js
@@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({
     },
   },
   searchIcon: {
-    width: theme.spacing(7),
+    padding: theme.spacing(0, 2),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -49,13 +49,15 @@ const useStyles = makeStyles(theme => ({
     color: 'inherit',
   },
   inputInput: {
-    padding: theme.spacing(1, 1, 1, 7),
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('sm')]: {
-      width: 120,
+      width: '12ch',
       '&:focus': {
-        width: 200,
+        width: '20ch',
       },
     },
   },
diff --git a/docs/src/pages/components/app-bar/SearchAppBar.tsx b/docs/src/pages/components/app-bar/SearchAppBar.tsx
index e16142c60f346e..91eeef616c8d69 100644
--- a/docs/src/pages/components/app-bar/SearchAppBar.tsx
+++ b/docs/src/pages/components/app-bar/SearchAppBar.tsx
@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     searchIcon: {
-      width: theme.spacing(7),
+      padding: theme.spacing(0, 2),
       height: '100%',
       position: 'absolute',
       pointerEvents: 'none',
@@ -50,13 +50,15 @@ const useStyles = makeStyles((theme: Theme) =>
       color: 'inherit',
     },
     inputInput: {
-      padding: theme.spacing(1, 1, 1, 7),
+      padding: theme.spacing(1, 1, 1, 0),
+      // vertical padding + font size from searchIcon
+      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
       transition: theme.transitions.create('width'),
       width: '100%',
       [theme.breakpoints.up('sm')]: {
-        width: 120,
+        width: '12ch',
         '&:focus': {
-          width: 200,
+          width: '20ch',
         },
       },
     },
diff --git a/docs/src/pages/components/lists/AlignItemsList.js b/docs/src/pages/components/lists/AlignItemsList.js
index c28e133e9b2d2e..124cf20c3d0ae6 100644
--- a/docs/src/pages/components/lists/AlignItemsList.js
+++ b/docs/src/pages/components/lists/AlignItemsList.js
@@ -11,7 +11,7 @@ import Typography from '@material-ui/core/Typography';
 const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
-    maxWidth: 360,
+    maxWidth: '36ch',
     backgroundColor: theme.palette.background.paper,
   },
   inline: {
diff --git a/docs/src/pages/components/lists/AlignItemsList.tsx b/docs/src/pages/components/lists/AlignItemsList.tsx
index 90b27ed8d7f111..dbeb6103bbb362 100644
--- a/docs/src/pages/components/lists/AlignItemsList.tsx
+++ b/docs/src/pages/components/lists/AlignItemsList.tsx
@@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       width: '100%',
-      maxWidth: 360,
+      maxWidth: '36ch',
       backgroundColor: theme.palette.background.paper,
     },
     inline: {
diff --git a/docs/src/pages/components/menus/LongMenu.js b/docs/src/pages/components/menus/LongMenu.js
index b827659c60aefa..2d364f5f3d7ddf 100644
--- a/docs/src/pages/components/menus/LongMenu.js
+++ b/docs/src/pages/components/menus/LongMenu.js
@@ -54,7 +54,7 @@ export default function LongMenu() {
         PaperProps={{
           style: {
             maxHeight: ITEM_HEIGHT * 4.5,
-            width: 200,
+            width: '20ch',
           },
         }}
       >
diff --git a/docs/src/pages/components/menus/LongMenu.tsx b/docs/src/pages/components/menus/LongMenu.tsx
index f083f7ed215aa7..807bf94c9a9bc0 100644
--- a/docs/src/pages/components/menus/LongMenu.tsx
+++ b/docs/src/pages/components/menus/LongMenu.tsx
@@ -54,7 +54,7 @@ export default function LongMenu() {
         PaperProps={{
           style: {
             maxHeight: ITEM_HEIGHT * 4.5,
-            width: 200,
+            width: '20ch',
           },
         }}
       >
diff --git a/docs/src/pages/components/menus/SimpleListMenu.js b/docs/src/pages/components/menus/SimpleListMenu.js
index 964402db3a02e5..180a07aa851c4c 100644
--- a/docs/src/pages/components/menus/SimpleListMenu.js
+++ b/docs/src/pages/components/menus/SimpleListMenu.js
@@ -8,8 +8,6 @@ import Menu from '@material-ui/core/Menu';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: '100%',
-    maxWidth: 360,
     backgroundColor: theme.palette.background.paper,
   },
 }));
diff --git a/docs/src/pages/components/menus/SimpleListMenu.tsx b/docs/src/pages/components/menus/SimpleListMenu.tsx
index 3e5c1e03a43bb2..28a04a803b5563 100644
--- a/docs/src/pages/components/menus/SimpleListMenu.tsx
+++ b/docs/src/pages/components/menus/SimpleListMenu.tsx
@@ -9,8 +9,6 @@ import Menu from '@material-ui/core/Menu';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '100%',
-      maxWidth: 360,
       backgroundColor: theme.palette.background.paper,
     },
   }),
diff --git a/docs/src/pages/components/text-fields/BasicTextFields.js b/docs/src/pages/components/text-fields/BasicTextFields.js
index d12a5802fb0a31..412b88401f9bfe 100644
--- a/docs/src/pages/components/text-fields/BasicTextFields.js
+++ b/docs/src/pages/components/text-fields/BasicTextFields.js
@@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     '& > *': {
       margin: theme.spacing(1),
-      width: 200,
+      width: '25ch',
     },
   },
 }));
diff --git a/docs/src/pages/components/text-fields/BasicTextFields.tsx b/docs/src/pages/components/text-fields/BasicTextFields.tsx
index c0a167be8a7ac3..99957ca120964d 100644
--- a/docs/src/pages/components/text-fields/BasicTextFields.tsx
+++ b/docs/src/pages/components/text-fields/BasicTextFields.tsx
@@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       '& > *': {
         margin: theme.spacing(1),
-        width: 200,
+        width: '25ch',
       },
     },
   }),
diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js
index f610ea21297a64..c56b9afc40bc96 100644
--- a/docs/src/pages/components/text-fields/ColorTextFields.js
+++ b/docs/src/pages/components/text-fields/ColorTextFields.js
@@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     '& > *': {
       margin: theme.spacing(1),
-      width: 200,
+      width: '25ch',
     },
   },
 }));
diff --git a/docs/src/pages/components/text-fields/ColorTextFields.tsx b/docs/src/pages/components/text-fields/ColorTextFields.tsx
index ecfa1dd89f0502..d0be558c88fe6a 100644
--- a/docs/src/pages/components/text-fields/ColorTextFields.tsx
+++ b/docs/src/pages/components/text-fields/ColorTextFields.tsx
@@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       '& > *': {
         margin: theme.spacing(1),
-        width: 200,
+        width: '25ch',
       },
     },
   }),
diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.js b/docs/src/pages/components/text-fields/FormPropsTextFields.js
index dca99feadcf0cb..d1aa2523002089 100644
--- a/docs/src/pages/components/text-fields/FormPropsTextFields.js
+++ b/docs/src/pages/components/text-fields/FormPropsTextFields.js
@@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     '& .MuiTextField-root': {
       margin: theme.spacing(1),
-      width: 200,
+      width: '25ch',
     },
   },
 }));
diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.tsx b/docs/src/pages/components/text-fields/FormPropsTextFields.tsx
index 3dc5c459492b1a..2689659cee668a 100644
--- a/docs/src/pages/components/text-fields/FormPropsTextFields.tsx
+++ b/docs/src/pages/components/text-fields/FormPropsTextFields.tsx
@@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       '& .MuiTextField-root': {
         margin: theme.spacing(1),
-        width: 200,
+        width: '25ch',
       },
     },
   }),
diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js
index 3067025bd05222..53b16c03573160 100644
--- a/docs/src/pages/components/text-fields/InputAdornments.js
+++ b/docs/src/pages/components/text-fields/InputAdornments.js
@@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
     marginTop: theme.spacing(3),
   },
   textField: {
-    width: 200,
+    width: '25ch',
   },
 }));
 
diff --git a/docs/src/pages/components/text-fields/InputAdornments.tsx b/docs/src/pages/components/text-fields/InputAdornments.tsx
index 7b5c4b09976145..349af59685e098 100644
--- a/docs/src/pages/components/text-fields/InputAdornments.tsx
+++ b/docs/src/pages/components/text-fields/InputAdornments.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
       marginTop: theme.spacing(3),
     },
     textField: {
-      width: 200,
+      width: '25ch',
     },
   }),
 );
diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.js b/docs/src/pages/components/text-fields/LayoutTextFields.js
index 911675f1676ae0..51d5e6b0ad9116 100644
--- a/docs/src/pages/components/text-fields/LayoutTextFields.js
+++ b/docs/src/pages/components/text-fields/LayoutTextFields.js
@@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({
   textField: {
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1),
-    width: 200,
+    width: '25ch',
   },
 }));
 
diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.tsx b/docs/src/pages/components/text-fields/LayoutTextFields.tsx
index f643c98e3408c4..8c7e958b93b021 100644
--- a/docs/src/pages/components/text-fields/LayoutTextFields.tsx
+++ b/docs/src/pages/components/text-fields/LayoutTextFields.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) =>
     textField: {
       marginLeft: theme.spacing(1),
       marginRight: theme.spacing(1),
-      width: 200,
+      width: '25ch',
     },
   }),
 );
diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.js b/docs/src/pages/components/text-fields/MultilineTextFields.js
index 4b2df672012485..3f3f7a695e8123 100644
--- a/docs/src/pages/components/text-fields/MultilineTextFields.js
+++ b/docs/src/pages/components/text-fields/MultilineTextFields.js
@@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     '& .MuiTextField-root': {
       margin: theme.spacing(1),
-      width: 200,
+      width: '25ch',
     },
   },
 }));
diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.tsx b/docs/src/pages/components/text-fields/MultilineTextFields.tsx
index 778cb27240dc9e..115617850da5f5 100644
--- a/docs/src/pages/components/text-fields/MultilineTextFields.tsx
+++ b/docs/src/pages/components/text-fields/MultilineTextFields.tsx
@@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       '& .MuiTextField-root': {
         margin: theme.spacing(1),
-        width: 200,
+        width: '25ch',
       },
     },
   }),
diff --git a/docs/src/pages/components/text-fields/SelectTextFields.js b/docs/src/pages/components/text-fields/SelectTextFields.js
index 3d9422eec6db95..7f214a6d1465d5 100644
--- a/docs/src/pages/components/text-fields/SelectTextFields.js
+++ b/docs/src/pages/components/text-fields/SelectTextFields.js
@@ -26,7 +26,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     '& .MuiTextField-root': {
       margin: theme.spacing(1),
-      width: 200,
+      width: '25ch',
     },
   },
 }));
diff --git a/docs/src/pages/components/text-fields/SelectTextFields.tsx b/docs/src/pages/components/text-fields/SelectTextFields.tsx
index 65ca713f26d23c..9f3e6c86ee2ecc 100644
--- a/docs/src/pages/components/text-fields/SelectTextFields.tsx
+++ b/docs/src/pages/components/text-fields/SelectTextFields.tsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       '& .MuiTextField-root': {
         margin: theme.spacing(1),
-        width: 200,
+        width: '25ch',
       },
     },
   }),
diff --git a/docs/src/pages/components/text-fields/StateTextFields.js b/docs/src/pages/components/text-fields/StateTextFields.js
index 9e90288fee20c6..c04cf7077b2117 100644
--- a/docs/src/pages/components/text-fields/StateTextFields.js
+++ b/docs/src/pages/components/text-fields/StateTextFields.js
@@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     '& .MuiTextField-root': {
       margin: theme.spacing(1),
-      width: 200,
+      width: '25ch',
     },
   },
 }));
diff --git a/docs/src/pages/components/text-fields/StateTextFields.tsx b/docs/src/pages/components/text-fields/StateTextFields.tsx
index 82c6c63f8ce649..45293cedb380b2 100644
--- a/docs/src/pages/components/text-fields/StateTextFields.tsx
+++ b/docs/src/pages/components/text-fields/StateTextFields.tsx
@@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       '& .MuiTextField-root': {
         margin: theme.spacing(1),
-        width: 200,
+        width: '25ch',
       },
     },
   }),