[website] Fix margin bug on CTA

The visual bug: <img width="915" alt="Screenshot 2022-11-12 at 22 28 15" src="https://user-images.githubusercontent.com/3165635/201495238-8afdd1f3-8b62-42a0-a4b3-2bdaea71da60.png">
mui · Nov 12, 2022 · fd159a4 · fd159a4
1 parent e4a6fee
commit fd159a4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/docs/src/components/home/GetStartedButtons.tsx b/docs/src/components/home/GetStartedButtons.tsx
@@ -8,12 +8,18 @@ import CheckRounded from '@mui/icons-material/CheckRounded';
 import ROUTES from 'docs/src/route';
 import Link from 'docs/src/modules/components/Link';
 
-export default function GetStartedButtons({
-  installation = 'npm install @mui/material @emotion/react @emotion/styled',
-  to = ROUTES.documentation,
-  ...props
-}: { installation?: string; to?: string } & BoxProps) {
+interface GetStartedButtonsProps extends BoxProps {
+  installation?: string;
+  to?: string;
+}
+
+export default function GetStartedButtons(props: GetStartedButtonsProps) {
   const [copied, setCopied] = React.useState(false);
+  const {
+    installation = 'npm install @mui/material @emotion/react @emotion/styled',
+    to = ROUTES.documentation,
+    ...other
+  } = props;
   const handleCopy = () => {
     setCopied(true);
     copy(installation).then(() => {
@@ -22,12 +28,14 @@ export default function GetStartedButtons({
   };
   return (
     <Box
-      {...props}
+      {...other}
       sx={{
         display: 'flex',
-        flexWrap: 'wrap',
-        '&& > *': { minWidth: 'clamp(0px, (492px - 100%) * 999 ,100%)' },
-        ...props.sx,
+        flexWrap: { xs: 'wrap', md: 'nowrap' },
+        '&& > *': {
+          minWidth: { xs: '100%', md: '0%' },
+        },
+        ...other.sx,
       }}
     >
       <Button
@@ -38,8 +46,9 @@ export default function GetStartedButtons({
         variant="contained"
         endIcon={<KeyboardArrowRightRounded />}
         sx={{
-          mr: { xs: 0, sm: 2 },
-          mb: { xs: 2, sm: 0 },
+          flexShrink: 0,
+          mr: { xs: 0, md: 2 },
+          mb: { xs: 2, md: 0 },
         }}
       >
         Get started

diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
@@ -123,7 +123,7 @@ export default function Hero() {
             with Material UI, our fully-loaded component library, or bring your own design system to
             our production-ready components.
           </Typography>
-          <GetStartedButtons sx={{ justifyContent: { xs: 'center', md: 'flex-start' } }} />
+          <GetStartedButtons />
         </Box>
       }
       rightSx={{

diff --git a/docs/src/components/productCore/CoreHero.tsx b/docs/src/components/productCore/CoreHero.tsx
@@ -210,7 +210,7 @@ export default function Hero() {
             accessibility always in mind. We&apos;ve built the foundational UI blocks for your
             design system so you don&apos;t have to.
           </Typography>
-          <GetStartedButtons sx={{ justifyContent: { xs: 'center', md: 'flex-start' } }} />
+          <GetStartedButtons />
         </Box>
       }
       rightSx={{