refactor: structure container concerns better

The consumer of topbar should determine positioning

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">