feat(RoleRequirements): use ScrollArea

guildxyz · Oct 1, 2024 · 93951b0 · 93951b0
1 parent e764032
commit 93951b0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -263,7 +263,8 @@
 }
 
 @layer utilities {
-  .scroll-shadow {
+  .scroll-shadow,
+  .scroll-shadow [data-radix-scroll-area-viewport] {
     --scroll-shadow-bg: hsl(var(--card-secondary));
     --scroll-shadow-from: rgba(0, 0, 0, 0.1);
     --scroll-shadow-to: rgba(0, 0, 0, 0);

diff --git a/src/components/[guild]/Requirements/RoleRequirements.tsx b/src/components/[guild]/Requirements/RoleRequirements.tsx
@@ -1,3 +1,4 @@
+import { ScrollArea } from "@/components/ui/ScrollArea"
 import { cn } from "@/lib/utils"
 import { Question } from "@phosphor-icons/react/dist/ssr"
 import { Fragment } from "react"
@@ -27,9 +28,9 @@ const RoleRequirements = ({
   const { data: requirements, isLoading } = useRequirements(role?.id)
 
   return (
-    <div
+    <ScrollArea
       className={cn(
-        "custom-scrollbar flex w-full flex-grow basis-80 flex-col overflow-y-auto opacity-0 md:basis-0",
+        "flex w-full flex-grow basis-80 flex-col overflow-y-auto opacity-0 md:basis-0",
         {
           "opacity-100": isOpen,
           "basis-full": (requirements?.length ?? 0) < 3,
@@ -89,7 +90,7 @@ const RoleRequirements = ({
           </div>
         )}
       </div>
-    </div>
+    </ScrollArea>
   )
 }