fix(docs): fix overflowing issue

mittwald · Jan 29, 2024 · 99bb91e · 99bb91e
1 parent a6cca4c
commit 99bb91e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss
@@ -4,15 +4,14 @@
 }
 
 .center {
-  overflow: hidden;
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-areas:
     "header header"
     "nav      main"
     "footer    .  ";
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 200px minmax(0, 1fr);
   grid-gap: var(--size-px--l);
 }
 
@@ -23,7 +22,7 @@
       "nav   "
       "main  "
       "footer";
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 

diff --git a/packages/docs/src/lib/LiveCodeEditor/component/LiveCodeEditor.module.css b/packages/docs/src/lib/LiveCodeEditor/component/LiveCodeEditor.module.css
@@ -2,14 +2,22 @@
   --border-color: var(--neutral--color--400);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius--default);
-  overflow: hidden;
 }
 
 .preview {
   background-color: var(--neutral--color--300);
   padding: var(--size-px--l);
 }
 
+.editorContainer {
+  overflow: scroll;
+}
+
 .editor {
   font-family: monospace;
+  min-width: min-content;
+}
+
+.editor pre {
+  white-space: pre !important;
 }
diff --git a/packages/docs/src/lib/LiveCodeEditor/component/LiveCodeEditor.tsx b/packages/docs/src/lib/LiveCodeEditor/component/LiveCodeEditor.tsx
@@ -34,7 +34,9 @@ const LiveCodeEditor: FC<LiveCodeEditorProps> = (props) => {
     <LiveProvider code={code} scope={scope} transformCode={transformCode}>
       <div className={styles.root}>
         <LivePreview className={styles.preview} />
-        <LiveEditor className={styles.editor} />
+        <div className={styles.editorContainer}>
+          <LiveEditor className={styles.editor} />
+        </div>
         <LiveError className={styles.error} />
       </div>
     </LiveProvider>