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

@@ -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}