From 99bb91e62492377397d682279b708f85afa79161 Mon Sep 17 00:00:00 2001
From: Marco Falkenberg <m.falkenberg@mittwald.de>
Date: Mon, 29 Jan 2024 09:05:51 +0100
Subject: [PATCH] fix(docs): fix overflowing issue

---
 packages/docs/src/app/layout.module.scss               |  5 ++---
 .../LiveCodeEditor/component/LiveCodeEditor.module.css | 10 +++++++++-
 .../lib/LiveCodeEditor/component/LiveCodeEditor.tsx    |  4 +++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/docs/src/app/layout.module.scss b/packages/docs/src/app/layout.module.scss
index 7447badb2..d312ae24e 100644
--- a/packages/docs/src/app/layout.module.scss
+++ b/packages/docs/src/app/layout.module.scss
@@ -4,7 +4,6 @@
 }
 
 .center {
-  overflow: hidden;
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
@@ -12,7 +11,7 @@
     "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
index 798073041..3967aa188 100644
--- a/packages/docs/src/lib/LiveCodeEditor/component/LiveCodeEditor.module.css
+++ b/packages/docs/src/lib/LiveCodeEditor/component/LiveCodeEditor.module.css
@@ -2,7 +2,6 @@
   --border-color: var(--neutral--color--400);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius--default);
-  overflow: hidden;
 }
 
 .preview {
@@ -10,6 +9,15 @@
   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
index 76e50227d..ea98fc635 100644
--- 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>