From 4e5b48ff45a6004eeda1ea64f99e3d84980a6998 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 29 Mar 2020 00:08:04 +0100
Subject: [PATCH] [docs] Batch small changes (#20312)

---
 docs/pages/blog/2019-developer-survey-results.md     | 2 +-
 docs/src/modules/components/AppContainer.js          | 4 ++--
 docs/src/modules/components/Demo.js                  | 6 +++---
 docs/src/pages/components/autocomplete/LimitTags.js  | 2 +-
 docs/src/pages/components/autocomplete/LimitTags.tsx | 2 +-
 docs/src/pages/landing/Steps.js                      | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md
index 3a99245328d022..7aa05bab39ead9 100644
--- a/docs/pages/blog/2019-developer-survey-results.md
+++ b/docs/pages/blog/2019-developer-survey-results.md
@@ -320,4 +320,4 @@ We will run a similar survey next year to keep track of our progress.
 If you want to continue to influence our roadmap, please upvote 👍 the issues you are the most interested in on GitHub.
 
 <img src="/static/blog/2019-survey/vote.gif" style="display: block; margin: 0 auto;" alt="How to upvote on GitHub" />
-<div style="font-style: italic; text-align: center; margin: 8px;">Help us prioritize by upvoting.</div>
+<p class="blog-description">Help us prioritize by upvoting.</p>
diff --git a/docs/src/modules/components/AppContainer.js b/docs/src/modules/components/AppContainer.js
index 46cda5318851da..e4d41a36c2d577 100644
--- a/docs/src/modules/components/AppContainer.js
+++ b/docs/src/modules/components/AppContainer.js
@@ -8,8 +8,8 @@ const useStyles = makeStyles((theme) => ({
   root: {
     paddingTop: 80 + 16,
     [theme.breakpoints.up('lg')]: {
-      paddingLeft: theme.spacing(5),
-      paddingRight: theme.spacing(5),
+      paddingLeft: theme.spacing(6),
+      paddingRight: theme.spacing(6),
     },
   },
 }));
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 1b84e2441116a2..5a6a5161d6d761 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -153,12 +153,12 @@ function getDemoData(codeVariant, demo, githubLocation) {
 // TODO: replace with React.useOpaqueReference if it is released
 function useUniqueId(prefix) {
   // useOpaqueReference
-  const [id, setDemoId] = React.useState(null);
+  const [id, setId] = React.useState();
   React.useEffect(() => {
-    setDemoId(Math.random().toString(36).slice(2));
+    setId(Math.random().toString(36).slice(2));
   }, []);
 
-  return `${prefix}${id}`;
+  return id ? `${prefix}${id}` : id;
 }
 
 function Demo(props) {
diff --git a/docs/src/pages/components/autocomplete/LimitTags.js b/docs/src/pages/components/autocomplete/LimitTags.js
index 7f2bd393679983..f3c666b2bdb83d 100644
--- a/docs/src/pages/components/autocomplete/LimitTags.js
+++ b/docs/src/pages/components/autocomplete/LimitTags.js
@@ -21,7 +21,7 @@ export default function LimitTags() {
       <Autocomplete
         multiple
         limitTags={2}
-        id="limit-tags"
+        id="multiple-limit-tags"
         options={top100Films}
         getOptionLabel={(option) => option.title}
         defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
diff --git a/docs/src/pages/components/autocomplete/LimitTags.tsx b/docs/src/pages/components/autocomplete/LimitTags.tsx
index e4dfbb476a8ce6..2cb6a86a4a1619 100644
--- a/docs/src/pages/components/autocomplete/LimitTags.tsx
+++ b/docs/src/pages/components/autocomplete/LimitTags.tsx
@@ -23,7 +23,7 @@ export default function LimitTags() {
       <Autocomplete
         multiple
         limitTags={2}
-        id="limit-tags"
+        id="multiple-limit-tags"
         options={top100Films}
         getOptionLabel={(option) => option.title}
         defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
diff --git a/docs/src/pages/landing/Steps.js b/docs/src/pages/landing/Steps.js
index c3a893997d0aa6..2618d97ef61372 100644
--- a/docs/src/pages/landing/Steps.js
+++ b/docs/src/pages/landing/Steps.js
@@ -87,7 +87,7 @@ function HomeSteps() {
   const t = useSelector((state) => state.options.t);
 
   return (
-    <Container disableGutters maxwidth="lg" className={classes.root}>
+    <Container disableGutters className={classes.root}>
       <Grid container>
         <Grid item xs={12} md={6} className={clsx(classes.step, classes.leftStep)}>
           <div className={classes.stepTitle}>