fix: use cow scrollbar on morpho token selector

Author: jean-neiverth

packages/cow-hooks-ui/src/components/TokenFilterModal.tsx

@@ -3,6 +3,7 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import type { FilterType, MarketTokenInfo } from "../hooks/useMarketFilters";
+import { Scrollbar } from "../ui/Scrollbar";
 import { TokenItem } from "./TokenItem";
 
 interface TokenFilterModalProps {
@@ -72,29 +73,31 @@ export function TokenFilterModal({
               </div>
             </div>
             {/* Token List */}
-            <div className="flex-1 overflow-y-auto min-h-0">
-              {filteredTokens.length === 0 ? (
-                <div className="text-center text-muted-foreground py-6 px-3">
-                  <p className="text-sm">No tokens found</p>
-                </div>
-              ) : (
-                <div className="p-2">
-                  {filteredTokens.map((token) => {
-                    const isSelected = selectedTokens.has(
-                      token.address.toLowerCase(),
-                    );
-                    return (
-                      <TokenItem
-                        key={token.address}
-                        token={token}
-                        isSelected={isSelected}
-                        onToggle={onTokenToggle}
-                      />
-                    );
-                  })}
-                </div>
-              )}
-            </div>
+            <Scrollbar className="p-0">
+              <div className="flex-1 overflow-y-auto min-h-0">
+                {filteredTokens.length === 0 ? (
+                  <div className="text-center text-muted-foreground py-6 px-3">
+                    <p className="text-sm">No tokens found</p>
+                  </div>
+                ) : (
+                  <div className="p-2">
+                    {filteredTokens.map((token) => {
+                      const isSelected = selectedTokens.has(
+                        token.address.toLowerCase(),
+                      );
+                      return (
+                        <TokenItem
+                          key={token.address}
+                          token={token}
+                          isSelected={isSelected}
+                          onToggle={onTokenToggle}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </Scrollbar>
           </div>
         </Dialog.Content>
       </Dialog.Portal>

packages/cow-hooks-ui/src/ui/Scrollbar.tsx

@@ -1,9 +1,19 @@
+import { cn } from "@bleu.builders/ui";
 import type { ReactNode } from "react";
 
-export function Scrollbar({ children }: { children: ReactNode }) {
+export function Scrollbar({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
   return (
     <div
-      className="font-sans overflow-y-auto font-normal h-screen text-color-text p-[16px] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-muted [&::-webkit-scrollbar-thumb]:bg-foreground/15 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:rounded-full"
+      className={cn(
+        "font-sans overflow-y-auto font-normal h-screen text-color-text p-[16px] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-muted [&::-webkit-scrollbar-thumb]:bg-foreground/15 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:rounded-full",
+        className,
+      )}
       style={{ scrollbarGutter: "stable" }}
     >
       {children}