feat: add scrollbars to package page

src/pages/package.nim

@@ -35,7 +35,8 @@ proc renderAlias(pkg: NimPackage): VNode = buildHtml:
     a(href = "#/pkg/" & pkg.alias):
       text pkg.alias
 
-proc renderLinks(pkg: NimPackage): VNode = buildHtml(tdiv):
+proc renderLinks(pkg: NimPackage): VNode =
+  buildHtml(tdiv(class = "overflow-auto")):
     tdiv: text "links:"
     tdiv:
       pkg.projectUrl
@@ -73,7 +74,7 @@ proc renderPkgInfo(pkg: NimPackage): VNode =
         text pkg.getTimeSinceCommit
       tdiv:
         tdiv: text "usage:"
-        tdiv(class = "bg-ctp-surfacezero rounded my-2 mx-3 p-2 w-auto"):
+        tdiv(class = "bg-ctp-surfacezero rounded my-2 mx-3 p-2 w-auto overflow-auto"):
           pre:
             text "nimble install " & pkg.name
           pre:

unocss.config.ts

@@ -43,6 +43,29 @@ export default defineConfig({
       color: ${catppuccinColors.mauve};
       cursor: pointer;
     }
+
+    /* width */
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: ${catppuccinColors.crust};
+        border-radius: 5px;
+    }
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        background: ${catppuccinColors.mantle};
+        border: 1px solid transparent;
+        border-color: ${catppuccinColors.rosewater};
+        border-radius: 5px;
+    }
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: ${catppuccinColors.roswater};
+    }
+
+
     /* loading animation */
     .lds-dual-ring {
       display: inline-block;