[website] Fix a couple of rough edges (#40849)

mui · Jan 29, 2024 · 84ceaf7 · 84ceaf7
1 parent 34be4b1
commit 84ceaf7
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 18 deletions.
diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
@@ -13,6 +13,7 @@ export function Group({
     <Box
       {...props}
       sx={{
+        overflow: 'auto',
         maxWidth: rowLayout ? 'none' : { md: 500 },
         display: { xs: 'grid', sm: rowLayout ? 'flex' : 'grid' },
         justifyContent: { xs: 'start', sm: rowLayout ? 'center' : null },

diff --git a/docs/src/components/home/GetStartedButtons.tsx b/docs/src/components/home/GetStartedButtons.tsx
@@ -64,7 +64,6 @@ export default function GetStartedButtons(props: GetStartedButtonsProps) {
           endIcon={<KeyboardArrowRightRounded />}
           sx={{
             flexShrink: 0,
-            mb: { xs: 2, md: 0 },
           }}
         >
           {primaryLabel}

diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx
@@ -59,7 +59,6 @@ export default function ProductSuite() {
             }
             description="Build at an accelerated pace without sacrificing flexibility or control."
           />
-          <Box sx={{ mt: 4 }} />
           <ProductsSwitcher
             inView={inView}
             productIndex={productIndex}

diff --git a/docs/src/components/home/StartToday.tsx b/docs/src/components/home/StartToday.tsx
@@ -11,8 +11,7 @@ export default function StartToday() {
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
-        position: 'relative',
+        alignItems: { xs: 'auto', sm: 'center' },
       }}
     >
       <SectionHeadline

diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -234,18 +234,16 @@ export default function BaseUICustomization() {
     <Section>
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
-          <Box maxWidth={500} sx={{ mb: 4 }}>
-            <SectionHeadline
-              overline="Customization"
-              title={
-                <Typography variant="h2">
-                  <GradientText>Endless possibilities </GradientText>
-                  <br /> with a lightweight API
-                </Typography>
-              }
-              description="With Base UI, you have the freedom to decide how much you want to customize a component's structure and style."
-            />
-          </Box>
+          <SectionHeadline
+            overline="Customization"
+            title={
+              <Typography variant="h2">
+                <GradientText>Endless possibilities </GradientText>
+                <br /> with a lightweight API
+              </Typography>
+            }
+            description="With Base UI, you have the freedom to decide how much you want to customize a component's structure and style."
+          />
           <Group sx={{ m: -2, p: 2 }}>
             <Highlighter disableBorder {...getSelectedProps(0)} onClick={() => setIndex(0)}>
               <Item

diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx
@@ -47,7 +47,7 @@ export default function BaseUISummary() {
         }
         description="Base UI abstracts away the more frustrating aspects of UI development—like accessibility, cross-browser compatibility, and event handling—so you can skip ahead to design implementation."
       />
-      <Box sx={{ mt: 8 }}>
+      <Box sx={{ mt: 6 }}>
         <Grid container spacing={3}>
           {content.map(({ icon, title, description, link }) => (
             <Grid key={title} item xs={12} md={4}>
@@ -56,7 +56,7 @@ export default function BaseUISummary() {
           ))}
         </Grid>
       </Box>
-      <Typography fontWeight={500} textAlign="center" mt={8} mb={2} fontSize="0.875rem">
+      <Typography fontWeight="medium" textAlign="center" mt={6} mb={2} fontSize="0.875rem">
         Alternative to libraries such as:
       </Typography>
       <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>