Skip to content
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

Merged
merged 1 commit into from Nov 14, 2022

Conversation

oliviertassinari
Copy link
Member

Fix point 3 and 4 in #34870 (comment).

@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label Nov 12, 2022
@mui-bot
Copy link

mui-bot commented Nov 12, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-35108--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 5a3f18b

@@ -123,7 +123,7 @@ export function AdCarbonInline(props) {
/>
</React.Fragment>
) : (
<div {...props} style={{ minHeight: 45 }} />
<div {...props} style={{ minHeight: 52 }} />
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To match

Screenshot 2022-11-12 at 17 25 59

@@ -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],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for !important.

Comment on lines +30 to +31
[theme.breakpoints.up('sm')]: {
borderRadius: theme.shape.borderRadius,
},
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@@ -46,6 +46,7 @@ const adBodyInlineStyles = (theme) => {
...baseline,
root: {
display: 'block',
paddingTop: 8,
Copy link
Member Author

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)}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To equal

Comment on lines +274 to +284
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,
},
},
});
}));
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix demos that have , "disableLiveEdit":true}} on mobile, Before:

Screenshot 2022-11-12 at 17 28 46

After:

Screenshot 2022-11-12 at 17 29 20

Copy link

@acrodemocide acrodemocide left a 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

@michaldudak michaldudak merged commit 9ca4acb into mui:master Nov 14, 2022
@oliviertassinari oliviertassinari deleted the fix-display-regression branch November 14, 2022 10:46
the-mgi pushed a commit to the-mgi/material-ui that referenced this pull request Nov 17, 2022
@oliviertassinari oliviertassinari added the scope: docs-infra Specific to the docs-infra product label Nov 21, 2022
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work docs Improvements or additions to the documentation scope: docs-infra Specific to the docs-infra product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants