From 790fedf0825263e72d8b89dd74671f982c603647 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 14 Nov 2022 11:45:50 +0100
Subject: [PATCH] [docs] Fix code editor styles mismatches (#35108)

---
 docs/src/modules/components/AdCarbon.js    |  2 +-
 docs/src/modules/components/Demo.js        | 11 ++++++++---
 docs/src/modules/components/DemoEditor.tsx | 12 ++++++++----
 docs/src/modules/components/ad.styles.js   |  1 +
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js
index b317382e73be86..cf903c5bb1331c 100644
--- a/docs/src/modules/components/AdCarbon.js
+++ b/docs/src/modules/components/AdCarbon.js
@@ -123,7 +123,7 @@ export function AdCarbonInline(props) {
       />
     </React.Fragment>
   ) : (
-    <div {...props} style={{ minHeight: 45 }} />
+    <div {...props} style={{ minHeight: 52 }} />
   );
 }
 
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 4da394ac59c086..49d83c1f642422 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -266,12 +266,17 @@ const DemoRootJoy = joyStyled('div', {
   }),
 }));
 
-const DemoCodeViewer = styled(HighlightedCode)({
+const DemoCodeViewer = styled(HighlightedCode)(({ theme }) => ({
   '& pre': {
-    margin: '0 auto',
+    margin: 0,
     maxHeight: 'min(68vh, 1000px)',
+    maxWidth: 'initial',
+    borderRadius: 0,
+    [theme.breakpoints.up('sm')]: {
+      borderRadius: theme.shape.borderRadius,
+    },
   },
-});
+}));
 
 const AnchorLink = styled('div')({
   marginTop: -64, // height of toolbar
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index dc7b7444050a16..54058116f3aa63 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import SimpleCodeEditor from 'react-simple-code-editor';
 import Box from '@mui/material/Box';
 import NoSsr from '@mui/base/NoSsr';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import prism from '@mui/markdown/prism';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton';
@@ -14,8 +14,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => ({
   '& .scrollContainer': {
     maxHeight: 'min(68vh, 1000px)',
     overflow: 'auto',
-    backgroundColor: `${blueDark[800]} !important`,
-    borderRadius: theme.shape.borderRadius,
+    backgroundColor: blueDark[800],
     colorScheme: 'dark',
     '&:hover': {
       boxShadow: `0 0 0 3px ${
@@ -27,6 +26,9 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => ({
         theme.palette.mode === 'dark' ? theme.palette.primaryDark.main : theme.palette.primary.main
       }`,
     },
+    [theme.breakpoints.up('sm')]: {
+      borderRadius: theme.shape.borderRadius,
+    },
   },
   '& pre': {
     // The scroll container needs to be the parent of the editor, overriding:
@@ -50,6 +52,7 @@ const StyledSimpleCodeEditor = styled(SimpleCodeEditor)(({ theme }) => ({
     outline: 'none',
   },
   '& > textarea, & > pre': {
+    // Override inline-style
     whiteSpace: 'pre !important',
   },
 }));
@@ -66,6 +69,7 @@ interface DemoEditorProps {
 export default function DemoEditor(props: DemoEditorProps) {
   const { language, value, onChange, copyButtonProps, children, id } = props;
   const t = useTranslate();
+  const contextTheme = useTheme();
   const wrapperRef = React.useRef<HTMLElement | null>(null);
   const enterRef = React.useRef<HTMLElement | null>(null);
   const handlers = useCodeCopy();
@@ -100,7 +104,7 @@ export default function DemoEditor(props: DemoEditorProps) {
       <div className="MuiCode-root" {...handlers}>
         <div className="scrollContainer">
           <StyledSimpleCodeEditor
-            padding={20}
+            padding={contextTheme.spacing(2)}
             highlight={(code: any) =>
               `<code class="language-${language}">${prism(code, language)}</code>`
             }
diff --git a/docs/src/modules/components/ad.styles.js b/docs/src/modules/components/ad.styles.js
index 85bd1223776ddf..6a655746989c6b 100644
--- a/docs/src/modules/components/ad.styles.js
+++ b/docs/src/modules/components/ad.styles.js
@@ -46,6 +46,7 @@ const adBodyInlineStyles = (theme) => {
     ...baseline,
     root: {
       display: 'block',
+      paddingTop: 8,
     },
     imgWrapper: {
       display: 'none',