From 83c7b2ad53caebfddfa6aa6e33e81d6505b89677 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 21 Mar 2026 11:49:18 -0700
Subject: [PATCH] refactor: structure container concerns better

The consumer of topbar should determine positioning
---
 js/src/features/particles/stream-view.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index 41b8572..0d81887 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/js/src/features/particles/stream-view.tsx
@@ -368,7 +368,9 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
         />
       </div>
 
-      <TopBar networkId={networkId} particle={currentParticle} streamParticle={streamParticle} />
+      <div className="z-10 absolute left-0 right-0">
+        <TopBar networkId={networkId} particle={currentParticle} streamParticle={streamParticle} />
+      </div>
 
       {/* Main playback area */}
       <div className="flex-1 overflow-hidden">
@@ -410,7 +412,7 @@ function TopBar({ networkId, particle, streamParticle }: { networkId: string; pa
   const navigate = useNavigate();
 
   return (
-    <div className="drag-region z-10 absolute left-0 right-0 flex flex-row mt-3 px-4 gap-5 items-center opacity-0 hover:opacity-100 transition-all">
+    <div className="drag-region flex flex-row mt-3 px-4 gap-5 items-center opacity-0 hover:opacity-100 transition-all">
       <WindowControls />
 
       <Breadcrumb className="no-drag rounded-full bg-black/30 backdrop-blur-sm px-3 py-1 mx-auto">