From 58b70fc154607ad0cd7086974413ac516a13d676 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Sun, 2 Aug 2026 18:54:42 -0400
Subject: [PATCH] fix(locker): match tooltip arrow color to dark popover
 background

- Add arrowClassName prop to TooltipContent component
- Pass bg-popover fill-popover to wardrobe tooltip arrow
- Arrow now matches the dark tooltip body instead of being white
---
 src/components/frontend/locker/Wardrobe.tsx | 1 +
 src/components/ui/tooltip.tsx               | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/frontend/locker/Wardrobe.tsx b/src/components/frontend/locker/Wardrobe.tsx
index 642e84d..75c5460 100644
--- a/src/components/frontend/locker/Wardrobe.tsx
+++ b/src/components/frontend/locker/Wardrobe.tsx
@@ -114,6 +114,7 @@ export function Wardrobe({
                 side="right"
                 sideOffset={8}
                 className="bg-popover text-popover-foreground border border-border text-sm px-3.5 py-2"
+                arrowClassName="bg-popover fill-popover"
               >
                 <div className="flex flex-col gap-0.5">
                   <span className="font-semibold">{layout.label}</span>
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index a4e90d4..2d803a5 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -36,10 +36,11 @@ function TooltipTrigger({
 
 function TooltipContent({
   className,
+  arrowClassName,
   sideOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & { arrowClassName?: string }) {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
@@ -52,7 +53,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className={cn("bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]", arrowClassName)} />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )