From ae1c4dfd9f5154f21a0b8b93f683854fa9d624a0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 28 Jan 2026 09:54:14 +0000
Subject: [PATCH] fix: wrap spell feed components in container div for proper
 rendering

Added container divs around SpellHeader + EventFeed in all three viewers.
React fragments (<></>) don't create DOM nodes, which was causing layout
issues where the EventFeed wasn't rendering properly in the flow.

By wrapping SpellHeader and EventFeed in a simple <div>, they now render
as a proper sibling block within the TabsContent, allowing the feed to
display correctly in the single-scroll layout.

Changes:
- EventDetailViewer.tsx: Wrap SpellHeader + EventFeed in div
- ProfileViewer.tsx: Wrap SpellHeader + EventFeed in div
- RelayViewer.tsx: Wrap SpellHeader + EventFeed in div
---
 src/components/EventDetailViewer.tsx | 4 ++--
 src/components/ProfileViewer.tsx     | 4 ++--
 src/components/RelayViewer.tsx       | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/EventDetailViewer.tsx b/src/components/EventDetailViewer.tsx
index cc70348..b762133 100644
--- a/src/components/EventDetailViewer.tsx
+++ b/src/components/EventDetailViewer.tsx
@@ -189,7 +189,7 @@ function SpellTabContent({
           needsAccount={false}
         />
       ) : (
-        <>
+        <div>
           <SpellHeader
             loading={loading}
             overallState={overallState}
@@ -209,7 +209,7 @@ function SpellTabContent({
             stream={true}
             enableFreeze={true}
           />
-        </>
+        </div>
       )}
     </TabsContent>
   );
diff --git a/src/components/ProfileViewer.tsx b/src/components/ProfileViewer.tsx
index 2a18ddd..5e2e8e3 100644
--- a/src/components/ProfileViewer.tsx
+++ b/src/components/ProfileViewer.tsx
@@ -276,7 +276,7 @@ function SpellTabContent({
           needsAccount={false}
         />
       ) : (
-        <>
+        <div>
           <SpellHeader
             loading={loading}
             overallState={overallState}
@@ -296,7 +296,7 @@ function SpellTabContent({
             stream={true}
             enableFreeze={true}
           />
-        </>
+        </div>
       )}
     </TabsContent>
   );
diff --git a/src/components/RelayViewer.tsx b/src/components/RelayViewer.tsx
index 376968f..4657d5a 100644
--- a/src/components/RelayViewer.tsx
+++ b/src/components/RelayViewer.tsx
@@ -152,7 +152,7 @@ function SpellTabContent({
           needsAccount={false}
         />
       ) : (
-        <>
+        <div>
           <SpellHeader
             loading={loading}
             overallState={overallState}
@@ -172,7 +172,7 @@ function SpellTabContent({
             stream={true}
             enableFreeze={true}
           />
-        </>
+        </div>
       )}
     </TabsContent>
   );