-
-
Notifications
You must be signed in to change notification settings - Fork 32.6k
[docs] Fix code editor styles mismatches #35108
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Fix code editor styles mismatches #35108
Conversation
3459b10
to
783d21b
Compare
|
783d21b
to
e23fa1f
Compare
@@ -123,7 +123,7 @@ export function AdCarbonInline(props) { | |||
/> | |||
</React.Fragment> | |||
) : ( | |||
<div {...props} style={{ minHeight: 45 }} /> | |||
<div {...props} style={{ minHeight: 52 }} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -14,8 +15,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => ({ | |||
'& .scrollContainer': { | |||
maxHeight: 'min(68vh, 1000px)', | |||
overflow: 'auto', | |||
backgroundColor: `${blueDark[800]} !important`, | |||
borderRadius: theme.shape.borderRadius, | |||
backgroundColor: blueDark[800], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No need for !important
.
[theme.breakpoints.up('sm')]: { | ||
borderRadius: theme.shape.borderRadius, | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix code preview that look strange on mobile
Before:
https://mui.com/material-ui/react-skeleton/#animations
After:
https://deploy-preview-35108--material-ui.netlify.app/material-ui/react-skeleton/#animations
@@ -46,6 +46,7 @@ const adBodyInlineStyles = (theme) => { | |||
...baseline, | |||
root: { | |||
display: 'block', | |||
paddingTop: 8, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -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)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To equal
padding: theme.spacing(2), |
e23fa1f
to
5a3f18b
Compare
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, | ||
}, | ||
}, | ||
}); | ||
})); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good. Tested locally
Fix point 3 and 4 in #34870 (comment).