From 78320f33c8a3bb6b0eed3bcdaed2390c89d0f26d Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Thu, 19 Mar 2026 11:47:47 -0700
Subject: [PATCH] fix: improve controls indicator immersion

---
 js/src/features/compose/controls-indicator.tsx | 3 ++-
 js/src/features/layout.tsx                     | 4 +---
 js/src/features/network-root.tsx               | 6 +++---
 js/src/features/particles/stream-view.tsx      | 6 ++----
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/js/src/features/compose/controls-indicator.tsx b/js/src/features/compose/controls-indicator.tsx
index 0efb3ce..ffc0101 100644
--- a/js/src/features/compose/controls-indicator.tsx
+++ b/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
diff --git a/js/src/features/layout.tsx b/js/src/features/layout.tsx
index eec6008..b22a31e 100644
--- a/js/src/features/layout.tsx
+++ b/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 />
-      </div>
+      <Outlet />
     </div>
   );
 }
diff --git a/js/src/features/network-root.tsx b/js/src/features/network-root.tsx
index 0ecc103..c7bea20 100644
--- a/js/src/features/network-root.tsx
+++ b/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>
   );
 }
diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index 183ca1d..c8307a7 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/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="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"} />
-        </div>
+      <div className="absolute right-0 left-0 bottom-0 z-10">
+        <ControlsIndicator type={"reply"} />
       </div>
     </div>
   );