Merge pull request #454 from haliliceylan/fix-406

fix(ui): show horizontal scrollbar on code blocks in markdown

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1770073757,
-        "narHash": "sha256-Vy+G+F+3E/Tl+GMNgiHl9Pah2DgShmIUBJXmbiQPHbI=",
+        "lastModified": 1771207753,
+        "narHash": "sha256-b9uG8yN50DRQ6A7JdZBfzq718ryYrlmGgqkRm9OOwCE=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "47472570b1e607482890801aeaf29bfb749884f6",
+        "rev": "d1c15b7d5806069da59e819999d70e1cec0760bf",
         "type": "github"
       },
       "original": {

packages/kilo-ui/src/components/markdown.css

@@ -2,4 +2,32 @@
   .shiki {
     margin: 0rem;
   }
+
+  pre {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-weak-base) transparent;
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-button {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--border-weak-base);
+      border-radius: 4px;
+
+      &:hover {
+        background: var(--border-strong-base);
+      }
+    }
+  }
 }

packages/kilo-ui/src/styles/globals.css

@@ -49,7 +49,8 @@
 }
 
 ::-webkit-scrollbar-button {
-  display: block;
+  display: none;
+  width: 0;
   height: 0;
 }
 
@@ -63,7 +64,8 @@ html[data-theme="kilo-vscode"] {
   font-weight: var(--vscode-font-weight);
 
   ::-webkit-scrollbar-button {
-    display: block;
+    display: none;
+    width: 0;
     height: 0;
   }