From ace6e3c00bb83e4042bb3460ebd948ddbff05ad8 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 23 Apr 2024 20:09:52 -0300
Subject: [PATCH] fix the Material Components section

---
 docs/src/components/action/Frame.tsx          |  2 +-
 .../productMaterial/MaterialComponents.tsx    | 51 ++++++++-----------
 .../productMaterial/MaterialStyling.tsx       |  2 +-
 3 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/docs/src/components/action/Frame.tsx b/docs/src/components/action/Frame.tsx
index 8e37b626b8eb09..19da799dbf47b4 100644
--- a/docs/src/components/action/Frame.tsx
+++ b/docs/src/components/action/Frame.tsx
@@ -36,7 +36,7 @@ const FrameInfo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameInfo(
         borderColor: 'primaryDark.700',
         borderTop: 0,
         colorScheme: 'dark',
-        '* pre, code': {
+        '* > pre, code': {
           p: 0,
           m: 0,
           maxHeight: '100%',
diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
index 5121c25c00c789..8a4607f314c49a 100644
--- a/docs/src/components/productMaterial/MaterialComponents.tsx
+++ b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -287,47 +287,26 @@ export default function MaterialComponents() {
             <Frame.Info
               data-mui-color-scheme="dark"
               sx={{
-                minHeight: 220,
+                pt: 7,
+                minHeight: 180,
                 maxHeight: demo === 'Table' ? 260 : 'none',
                 position: 'relative',
-                overflow: 'hidden',
-                p: 0,
-                pt: 5,
+                overflow: 'clip',
               }}
             >
-              <StylingInfo appeared={customized} />
-              <Box
-                sx={{
-                  overflow: 'auto',
-                  pt: 2,
-                  pb: 1,
-                  px: 2,
-                  height: '100%',
-                }}
-              >
-                <HighlightedCode
-                  copyButtonHidden
-                  component={MarkdownElement}
-                  code={CODES[demo]}
-                  language="jsx"
-                />
-              </Box>
               <Box
                 sx={(theme) => ({
                   pb: 3,
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 1,
                   position: 'absolute',
                   top: 16,
                   left: 12,
-                  right: 0,
                   zIndex: 10,
-                  background: `linear-gradient(to bottom, ${
-                    (theme.vars || theme).palette.common.black
-                  } 30%, transparent)`,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 1,
+                  background: `linear-gradient(to bottom, ${(theme.vars || theme).palette.common.black} 30%, transparent)`,
                   [`& .${buttonClasses.root}`]: {
-                    borderRadius: 40,
+                    borderRadius: 99,
                     padding: '2px 10px',
                     fontSize: '0.75rem',
                     lineHeight: 18 / 12,
@@ -358,6 +337,20 @@ export default function MaterialComponents() {
                   Custom theme
                 </Button>
               </Box>
+              <StylingInfo appeared={customized} />
+              <Box
+                sx={{
+                  overflow: 'auto',
+                  height: '100%',
+                }}
+              >
+                <HighlightedCode
+                  copyButtonHidden
+                  component={MarkdownElement}
+                  code={CODES[demo]}
+                  language="jsx"
+                />
+              </Box>
             </Frame.Info>
           </Frame>
         </Grid>
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index 2565c703eea688..1e57630038d6f5 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -314,7 +314,7 @@ export default function MaterialStyling() {
               }}
             >
               <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
-                <Box sx={{ position: 'relative', zIndex: 1 }}>
+                <Box sx={{ zIndex: 1 }}>
                   <HighlightedCode
                     copyButtonHidden
                     component={MarkdownElement}