Merge pull request #154 from Suzu-Gears/feature/Add_Codeblock_horizon…

…tal_scroll Add Codeblock horizontal scroll
otoyo · Jul 27, 2023 · 10c2874 · 10c2874 · vercel · Jul 27, 2023
2 parents 6b9d338 + 879961b
commit 10c2874
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/components/notion-blocks/Code.astro b/src/components/notion-blocks/Code.astro
@@ -78,6 +78,7 @@ const grammer =
   .code {
     display: block;
     width: 100%;
+    margin-bottom: 0.6rem;
   }
   .code > div {
     background: rgb(247, 246, 243);
@@ -103,7 +104,19 @@ const grammer =
     padding: 0.8rem 2rem 2rem;
     font-size: 0.9rem;
     line-height: 1.2rem;
-    white-space: pre-wrap;
+    white-space: pre;
+    width: 100px;
+    min-width: 100%;
+    overflow-x: auto;
+    &::-webkit-scrollbar {
+      height: 10px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgb(211, 209, 203);
+    }
+    &::-webkit-scrollbar-track {
+      background: rgb(237, 236, 233);
+    }
   }
   .code pre.mermaid {
     padding: 2rem;