feat: minimal horizontal scrollbar

aminnausin · aminnausin · commit 68673129aea2 · 2025-05-12T01:47:22.000-04:00
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Rubik:ital,wght@0,300..900;1,300..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Figtree:ital,wght@0,300..900;1,300..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Quicksand:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -41,25 +41,35 @@
         .scrollbar-minimal::-webkit-scrollbar {
             width: 0.35rem;
         }
-        .scrollbar-minimal::-webkit-scrollbar-track {
+
+        .scrollbar-minimal-x::-webkit-scrollbar {
+            height: 0.35rem;
+        }
+
+        .scrollbar-minimal::-webkit-scrollbar-track,
+        .scrollbar-minimal-x::-webkit-scrollbar-track {
             background: transparent;
             border-radius: 9999px;
         }
 
-        .scrollbar-minimal::-webkit-scrollbar-thumb {
+        .scrollbar-minimal::-webkit-scrollbar-thumb,
+        .scrollbar-minimal-x::-webkit-scrollbar-thumb {
             background: #8a8a8a;
             border-radius: 9999px;
         }
 
-        .scrollbar-minimal::-webkit-scrollbar-thumb:hover {
+        .scrollbar-minimal::-webkit-scrollbar-thumb:hover,
+        .scrollbar-minimal-x::-webkit-scrollbar-thumb:hover {
             background: #636363;
         }
 
-        .scrollbar-minimal:is(.dark *)::-webkit-scrollbar-thumb {
+        .scrollbar-minimal:is(.dark *)::-webkit-scrollbar-thumb,
+        .scrollbar-minimal-x:is(.dark *)::-webkit-scrollbar-thumb {
             background: #9e9e9e;
         }
 
-        .scrollbar-minimal:is(.dark *)::-webkit-scrollbar-thumb:hover {
+        .scrollbar-minimal:is(.dark *)::-webkit-scrollbar-thumb:hover,
+        .scrollbar-minimal-x:is(.dark *)::-webkit-scrollbar-thumb:hover {
             background: #d0d0d0;
         }
 
@@ -70,6 +80,14 @@
         .group:hover .scrollbar-minimal.scrollbar-hover::-webkit-scrollbar {
             width: 0.35rem;
         }
+
+        .scrollbar-minimal-x.scrollbar-hover::-webkit-scrollbar {
+            height: 0rem;
+        }
+
+        .group:hover .scrollbar-minimal-x.scrollbar-hover::-webkit-scrollbar {
+            height: 0.35rem;
+        }
     }
 
     .slider {
diff --git a/resources/js/components/pulseCards/PulseServers.vue b/resources/js/components/pulseCards/PulseServers.vue
@@ -252,7 +252,7 @@ watch(
 
 <template>
     <section
-        :class="`overflow-x-auto overflow-y-hidden max-w-full pb-px default:col-span-full default:lg:col-span-${props.cols} default:row-span-${props.rows} ${isLoading ? 'opacity-25 animate-pulse ' : ''}${props.class ?? ''}`"
+        :class="`overflow-x-auto overflow-y-hidden scrollbar-minimal-x max-w-full pb-2 default:col-span-full default:lg:col-span-${props.cols} default:row-span-${props.rows} ${isLoading ? 'opacity-25 animate-pulse ' : ''}${props.class ?? ''}`"
     >
         <div
             v-if="servers"

Original file line number	Diff line number	Diff line change
`@@ -252,7 +252,7 @@ watch(`
`252`	`252`
`253`	`253`	`<template>`
`254`	`254`	`<section`
`255`		- :class="`overflow-x-auto overflow-y-hidden max-w-full pb-px default:col-span-full default:lg:col-span-${props.cols} default:row-span-${props.rows} ${isLoading ? 'opacity-25 animate-pulse ' : ''}${props.class ?? ''}`"
	`255`	+ :class="`overflow-x-auto overflow-y-hidden scrollbar-minimal-x max-w-full pb-2 default:col-span-full default:lg:col-span-${props.cols} default:row-span-${props.rows} ${isLoading ? 'opacity-25 animate-pulse ' : ''}${props.class ?? ''}`"
`256`	`256`	`>`
`257`	`257`	`<div`
`258`	`258`	`v-if="servers"`