feat: customize scrollbar

src/components/Header.tsx

@@ -111,7 +111,7 @@ export const Header = () => {
   const [openedDrawer, setOpenedDrawer] = createSignal(false)
 
   return (
-    <ul class="navbar rounded-box sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
+    <ul class="navbar sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
       <div class="navbar-start gap-4">
         <div class={twMerge('drawer w-auto lg:hidden', '')}>
           <input

src/index.css

@@ -10,6 +10,23 @@
   src: url('assets/Twemoji.Mozilla.ttf') format('truetype');
 }
 
-::-webkit-scrollbar {
+:root {
-  display: none;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--p)) transparent;
+}
+
+::-webkit-scrollbar {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply rounded-box bg-primary;
+}
+
+::-webkit-scrollbar:vertical {
+  width: 6px;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 6px;
 }

src/pages/Connections.tsx

@@ -306,7 +306,7 @@ export default () => {
   ]
 
   return (
-    <div class="flex h-full flex-col gap-4 p-1">
+    <div class="flex h-full flex-col gap-2 p-1">
       <div class="tabs-boxed tabs gap-2">
         <For each={tabs()}>
           {(tab) => (