Fix document layout flickering. (#2514)

* fixed layout flickering. * Update main.js layout class name * Prevent code blocks from being translated. * fix: add width to wrapper --------- Co-authored-by: sandren <[email protected]>
pmndrs · Apr 23, 2024 · 5a525d8 · 5a525d8
1 parent 919c6d7
commit 5a525d8
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/website/src/components/code.js b/website/src/components/code.js
@@ -6,7 +6,7 @@ export const Code = ({ language = 'jsx', children }) => {
   return (
     <Highlight {...defaultProps} language={language} code={code} theme={undefined}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <pre className={className} style={style}>
+        <pre className={`${className} notranslate`} style={style}>
           {tokens.map((line, i) => (
             <div {...getLineProps({ line, key: i })}>
               {line.map((token, key) => (

diff --git a/website/src/components/main.js b/website/src/components/main.js
@@ -1,6 +1,6 @@
 export const Main = ({ children, ...rest }) => {
   return (
-    <main className="p-6 sm:p-8 lg:mt-8 lg:max-w-5xl lg:flex-shrink xl:p-16" {...rest}>
+    <main className="p-6 sm:p-8 lg:mt-8 lg:max-w-5xl lg:flex-shrink xl:p-16 grow" {...rest}>
       {children}
     </main>
   );

diff --git a/website/src/components/wrapper.js b/website/src/components/wrapper.js
@@ -1,7 +1,7 @@
 export const Wrapper = ({ children, ...rest }) => {
   return (
     <div
-      className="relative flex flex-col lg:mx-auto lg:max-w-[1920px] lg:flex-row lg:justify-around"
+      className="relative flex flex-col lg:mx-auto lg:max-w-[1920px] lg:w-full lg:flex-row lg:justify-around"
       {...rest}
     >
       {children}