new scroll invisible scrollbar

Author: martialziye

frontend/src/components/Dashboard/PopularTemplatesPanel.tsx

@@ -421,7 +421,7 @@ export function PopularTemplatesPanel() {
             </h3>
           </div>
 
-          <div className="min-h-[320px] max-h-[420px] overflow-y-auto rounded-[var(--radius-control)] border border-border/70 bg-background p-4 text-sm leading-7 text-foreground">
+          <div className="scrollbar-hover min-h-[320px] max-h-[420px] overflow-y-auto rounded-[var(--radius-control)] border border-border/70 bg-background p-4 text-sm leading-7 text-foreground">
             {renderPreview(selectedTemplate.preview)}
           </div>
 

frontend/src/index.css

@@ -152,3 +152,41 @@
     cursor: pointer;
   }
 }
+
+@layer utilities {
+  .scrollbar-hover {
+    scrollbar-width: none;
+    scrollbar-color: transparent transparent;
+  }
+
+  .scrollbar-hover::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .scrollbar-hover:hover {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--foreground) 32%, transparent)
+      transparent;
+  }
+
+  .scrollbar-hover:hover::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-hover:hover::-webkit-scrollbar-thumb {
+    background-color: color-mix(
+      in oklab,
+      var(--foreground) 28%,
+      transparent
+    );
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background-clip: padding-box;
+  }
+
+  .scrollbar-hover:hover::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}

frontend/src/routes/_layout/index.tsx

@@ -31,9 +31,6 @@ function Dashboard() {
         <h1 className="text-2xl truncate max-w-sm">
           Hi, {currentUser?.full_name || currentUser?.email}
         </h1>
-        <p className="text-muted-foreground">
-          Welcome back, nice to see you again!!!
-        </p>
       </div>
 
       <section className="rounded-lg border bg-card p-4">