From ef85f57cf20e9995cc8a5bdf10dc2da6fce8f801 Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Fri, 3 Jul 2026 15:22:36 -0400
Subject: [PATCH] fix: bake standard tooltip styling into TooltipContent
 component

Added font-mono tabular-nums text-stat-value directly to the
TooltipContent base styles so every tooltip in the app inherits
the same look without per-instance wrappers. Removed the now-
redundant span from StackRow's RowTooltip.
---
 frontend/src/components/sidebar/StackRow.tsx                | 2 +-
 frontend/src/components/sidebar/__tests__/StackRow.test.tsx | 2 +-
 frontend/src/components/ui/tooltip.tsx                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/sidebar/StackRow.tsx b/frontend/src/components/sidebar/StackRow.tsx
index eb7dd9d2..d28c28c4 100644
--- a/frontend/src/components/sidebar/StackRow.tsx
+++ b/frontend/src/components/sidebar/StackRow.tsx
@@ -38,7 +38,7 @@ function RowTooltip({ trigger, label }: { trigger: ReactNode; label: string }) {
       <Tooltip>
         <TooltipTrigger asChild>{trigger}</TooltipTrigger>
         <TooltipContent side="bottom" sideOffset={4} align="center">
-          <span className="font-mono text-xs tabular-nums text-stat-value">{label}</span>
+          {label}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
diff --git a/frontend/src/components/sidebar/__tests__/StackRow.test.tsx b/frontend/src/components/sidebar/__tests__/StackRow.test.tsx
index a200979c..15b642dc 100644
--- a/frontend/src/components/sidebar/__tests__/StackRow.test.tsx
+++ b/frontend/src/components/sidebar/__tests__/StackRow.test.tsx
@@ -43,7 +43,7 @@ describe('StackRow', () => {
   });
 
   it('wraps the partial pill in a hover tooltip', () => {
-    const { container } = render(<StackRow {...base({ status: 'partial', running: 3, total: 5 })} />);
+    render(<StackRow {...base({ status: 'partial', running: 3, total: 5 })} />);
     const trigger = screen.getByText('PT');
     // Radix TooltipTrigger adds data-state to the wrapped element.
     expect(trigger.getAttribute('data-state')).toBe('closed');
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index a063d5de..e0441e1b 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 overflow-hidden rounded-md border border-glass-border bg-popover px-3 py-1.5 text-xs text-popover-foreground backdrop-blur-[10px] backdrop-saturate-[1.15]',
+        'z-50 overflow-hidden rounded-md border border-glass-border bg-popover px-3 py-1.5 font-mono text-xs tabular-nums text-stat-value backdrop-blur-[10px] backdrop-saturate-[1.15]',
         'origin-[--radix-tooltip-content-transform-origin]',
         'animate-in fade-in-0 zoom-in-95 duration-150',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',