From 4eca8c5cc8a8b276f7eac5a36c43763cfc8bfc8d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Jan 2026 15:16:32 +0000
Subject: [PATCH] fix: add data-[state=inactive]:hidden to TabsContent

Fixes spell tab rendering issue where multiple tab contents were
visible simultaneously. Radix UI Tabs marks inactive tabs with
data-state="inactive", but our TabsContent wrapper was missing
the CSS selector to hide them.

Without this selector, all TabsContent elements render visibly,
causing overlapping/stacked content when switching between spell
tabs in ProfileViewer, EventDetailViewer, and RelayViewer.

Technical details:
- Radix UI renders ALL TabsContent to the DOM simultaneously
- Uses data-state="active"|"inactive" attributes for visibility
- The .flex class from Tailwind has equal specificity to [hidden]
- data-[state=inactive]:hidden ensures proper hiding with correct specificity

Fixes visibility issue across all three spell viewers.
---
 src/components/ui/tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index dd40857..5dc37e2 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "data-[state=inactive]:hidden ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}