[docs] Avoid layout jump

mui · Jan 27, 2020 · 9fd33cc · 9fd33cc
1 parent 72e9930
commit 9fd33cc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -21,6 +21,9 @@ import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
+  root: {
+    width: '100%',
+  },
   container: {
     position: 'relative',
   },
@@ -132,7 +135,7 @@ function MarkdownDocs(props) {
         </Portal>
       )}
       <div
-        className={clsx({
+        className={clsx(classes.root, {
           [classes.ad]: !disableAd,
           [classes.toc]: !disableToc,
         })}

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -147,6 +147,8 @@ const styles = theme => ({
     '& code[class*="language-"]': {
       backgroundColor: '#272c34',
       color: '#fff',
+      // Avoid layout jump after hydration (style injected by prism)
+      lineHeight: 1.5,
     },
     '& p code, & ul code, & pre code': {
       fontSize: 14,