[docs] Batch small changes (#20312)

Author: oliviertassinari

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>

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),
     },
   },
 }));

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) {

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]]}

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]]}

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}>