style clean-ups around the HighlightedCode component

mui · Apr 26, 2024 · 2e71ae3 · 2e71ae3
1 parent 19e8967
commit 2e71ae3
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 20 deletions.
diff --git a/docs/src/components/action/Frame.tsx b/docs/src/components/action/Frame.tsx
@@ -36,9 +36,7 @@ const FrameInfo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameInfo(
         borderColor: 'primaryDark.700',
         borderTop: 0,
         colorScheme: 'dark',
-        '* pre, code': {
-          bgcolor: 'common.black',
-        },
+        overflow: 'clip',
         ...props.sx,
       }}
     />

diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -162,11 +162,10 @@ export default function BaseUIComponents() {
             <Frame.Info
               data-mui-color-scheme="dark"
               sx={{
-                height: 360,
-                position: 'relative',
-                overflow: 'hidden',
                 p: 0,
                 pt: 5,
+                height: 360,
+                position: 'relative',
               }}
             >
               <Box

diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -3,7 +3,6 @@ import { styled } from '@mui/system';
 import clsx from 'clsx';
 import { Switch as SwitchUnstyled } from '@mui/base/Switch';
 import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
-import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
@@ -301,15 +300,12 @@ export default function BaseUICustomization() {
               ref={infoRef}
               sx={{
                 maxHeight: 450,
+                position: 'relative',
                 overflow: 'auto',
               }}
             >
-              <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
-                <Box sx={{ position: 'relative', zIndex: 1 }}>
-                  <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
-                </Box>
-                <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
-              </Box>
+              <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
+              <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: 1 }} />
             </Frame.Info>
           </Frame>
         </Grid>

diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx
@@ -290,7 +290,6 @@ export default function MaterialComponents() {
                 minHeight: 220,
                 maxHeight: demo === 'Table' ? 260 : 'none',
                 position: 'relative',
-                overflow: 'hidden',
                 p: 0,
                 pt: 5,
               }}

diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -311,14 +311,11 @@ export default function MaterialStyling() {
               sx={{
                 maxHeight: index === 2 ? 282 : 400,
                 overflow: 'auto',
+                position: 'relative',
               }}
             >
-              <Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
-                <Box sx={{ position: 'relative', zIndex: 1 }}>
-                  <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
-                </Box>
-                <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
-              </Box>
+              <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
+              <FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: 1 }} />
             </Frame.Info>
           </Frame>
         </Grid>