fix: make scrollbar thin at code blocks

HEIGE-PCloud · May 7, 2024 · 84db3c1 · 84db3c1
1 parent b025278
commit 84db3c1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -477,6 +477,10 @@ ul {
   list-style-type: disc;
 }
 
+.tw-scrollbar-thin {
+  scrollbar-width: thin;
+}
+
 :root {
   /* ========== Global ========== */
   /* Color of the background */

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -18,6 +18,9 @@
   ul {
     @apply tw-list-disc tw-list-outside;
   }
+  .tw-scrollbar-thin {
+    scrollbar-width: thin;
+  }
 
   :root {
     /* ========== Global ========== */

diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
@@ -110,5 +110,7 @@
       group-[.is-closed]:!tw-max-h-0 
       group-[.is-wrap]:tw-text-wrap
       tw-overflow-y-hidden
-      tw-overflow-x-auto">{{ $result.Inner }}</code></pre>
+      tw-overflow-x-auto
+      tw-scrollbar-thin
+      ">{{ $result.Inner }}</code></pre>
 </div>