From d7c51f5e38584c327e954a91743fb96b3e9b30a1 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 3 May 2020 13:29:16 +0200
Subject: [PATCH] [docs] Avoid social layout jump

---
 docs/pages/index.js | 51 ++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/docs/pages/index.js b/docs/pages/index.js
index 596d517555d247..a8751175b60fb0 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -88,14 +88,23 @@ const useStyles = makeStyles(
       alignItems: 'center',
       minHeight: 21,
       boxSizing: 'content-box',
-      '& span': {
-        display: 'flex',
-        marginRight: theme.spacing(1),
-      },
       '& a': {
         color: theme.palette.background.paper,
       },
     },
+    github: {
+      width: 105,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginRight: theme.spacing(1),
+      '& span': {
+        display: 'flex',
+      },
+    },
+    twitter: {
+      width: 160,
+      display: 'flex',
+    },
   }),
   { name: 'LandingPage' },
 );
@@ -150,21 +159,25 @@ export default function LandingPage(props) {
             </Container>
           </div>
           <div className={classes.social}>
-            <a
-              className="github-button"
-              href="https://github.com/mui-org/material-ui"
-              data-icon="octicon-star"
-              data-show-count="true"
-            >
-              Star
-            </a>
-            <a
-              className="twitter-follow-button"
-              href="https://twitter.com/@materialui"
-              data-show-screen-name="false"
-            >
-              Follow
-            </a>
+            <div className={classes.github}>
+              <a
+                className="github-button"
+                href="https://github.com/mui-org/material-ui"
+                data-icon="octicon-star"
+                data-show-count="true"
+              >
+                Star
+              </a>
+            </div>
+            <div className={classes.twitter}>
+              <a
+                className="twitter-follow-button"
+                href="https://twitter.com/@materialui"
+                data-show-screen-name="false"
+              >
+                Follow
+              </a>
+            </div>
           </div>
           <Pro />
           <QuickWord />