bugfixing screener

src/lib/components/shadcn/button/index.ts

@@ -6,12 +6,11 @@ const buttonVariants = tv({
   base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   variants: {
     variant: {
-      default: "bg-primary text-primary-foreground sm:hover:bg-[#09090B]",
+      default: "bg-primary text-primary-foreground",
-      destructive:
+      destructive: "bg-destructive text-destructive-foreground",
-        "bg-destructive text-destructive-foreground sm:hover:bg-[#09090B]",
       outline:
         "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-      secondary: "bg-secondary text-secondary-foreground sm:hover:bg-[#09090B]",
+      secondary: "bg-secondary text-secondary-foreground",
       ghost: "hover:bg-accent hover:text-accent-foreground",
       link: "text-primary underline-offset-4 hover:underline",
     },

src/routes/+layout.svelte

@@ -290,7 +290,7 @@ $: {
                 <span class="sr-only">Toggle Menu</span>
               </Button>
             </Sheet.Trigger>
-            <Sheet.Content side="left" class="max-w-screen w-full sm:max-w-xs bg-[#141417] overflow-y-scroll text-white">
+            <Sheet.Content side="left" class="max-w-screen w-full sm:max-w-xs bg-[#141417] overflow-y-auto text-white">
               <nav class=" grid gap-6 text-lg font-medium bg-[#141417]">
                 <a
                 href="/"

src/routes/stock-screener/[strategyId]/+page.svelte

@@ -1216,7 +1216,7 @@ async function popularStrategy(state: string) {
                                     </svg>
                                   </Button>
                                 </DropdownMenu.Trigger>
-                                <DropdownMenu.Content class="w-56">
+                                <DropdownMenu.Content class="w-56 h-fit max-h-72 overflow-y-auto scroller">
                                   <DropdownMenu.Label class="text-gray-400">
                                     Popular Strategies
                                   </DropdownMenu.Label>
@@ -1333,7 +1333,7 @@ async function popularStrategy(state: string) {
                                     </svg>
                                   </Button>
                                 </DropdownMenu.Trigger>
-                                <DropdownMenu.Content class="w-56">
+                                <DropdownMenu.Content class="w-56 h-fit max-h-72 overflow-y-auto scroller">
                                   <DropdownMenu.Label>
                                     <div class="flex items-center justify-start gap-x-1">
                                         <div class="relative inline-block flex flex-row items-center justify-center">
@@ -1695,8 +1695,29 @@ async function popularStrategy(state: string) {
 
 
 <style>
+
 .scroller {
   scrollbar-width: thin;
 }
 
+.scrollbar {
+    display: grid;
+    grid-gap: 90px;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    grid-auto-flow: column;
+    overflow-x: auto;
+    scrollbar-width: thin; /* Hide the default scrollbar in Firefox */
+    scrollbar-color: transparent transparent; /* Hide the default scrollbar in Firefox */
+  }
+
+  /* Custom scrollbar for Webkit (Chrome, Safari) */
+  .scrollbar::-webkit-scrollbar {
+    width: 0; /* Hide the width of the scrollbar */
+    height: 0; /* Hide the height of the scrollbar */
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: transparent; /* Make the thumb transparent */
+  }
+
 </style>