fix: improve controls indicator immersion

js/src/features/compose/controls-indicator.tsx

@@ -11,7 +11,7 @@ export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
   const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
 
   return (
-    <div className="flex items-center gap-2 text-xs">
+    <div className="flex items-center gap-2 text-xs rounded-full pl-1 pr-3 py-1 bg-black/30 backdrop-blur-sm m-2">
       <Button
         onClick={() =>
           setRecordingMode(recordingMode === "video" ? "audio" : "video")
@@ -39,6 +39,7 @@ export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
           </>
         )}
       </Button>
+      <div className="flex-1" />
       <div className="text-muted-foreground">
         Hold{" "}
         <kbd

js/src/features/layout.tsx

@@ -131,9 +131,7 @@ export default function Layout() {
   return (
     <div className="flex h-screen flex-col">
       <TopBar />
-      <div className="relative flex-1 overflow-hidden">
+      <Outlet />
-        <Outlet />
-      </div>
     </div>
   );
 }

js/src/features/network-root.tsx

@@ -13,10 +13,10 @@ export default function NetworkRoot() {
   const path = particlePath(networkId!, []);
 
   return (
-    <>
+    <div className="flex flex-col h-full relative">
       <ParticleListView path={path} />
-      <ControlsIndicator type={"new"} />
       <ComposeOverlay networkId={networkId!} />
-    </>
+      <ControlsIndicator type={"new"} />
+    </div>
   );
 }

js/src/features/particles/stream-view.tsx

@@ -265,10 +265,8 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
       />
 
       {/* Bottom overlay: stream info + reply */}
-      <div className="absolute right-0 bottom-0 z-10 flex justify-center p-2">
+      <div className="absolute right-0 left-0 bottom-0 z-10">
-        <div className="flex w-full items-center gap-2.5 rounded-full pl-1 pr-2 py-1 bg-black/30 backdrop-blur-sm">
+        <ControlsIndicator type={"reply"} />
-          <ControlsIndicator type={"reply"} />
-        </div>
       </div>
     </div>
   );