feat: improved layout and captions

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

@@ -240,6 +240,12 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
 
   return (
     <div className="relative flex h-screen flex-col bg-black text-white">
+      {/* Top gradient safe zone — keeps progress bar & breadcrumbs readable */}
+      <div className="pointer-events-none absolute inset-x-0 top-0 z-[5] h-32 bg-gradient-to-b from-black/60 to-transparent" />
+
+      {/* Bottom gradient safe zone — keeps captions & controls readable */}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-48 bg-gradient-to-t from-black/60 to-transparent" />
+
       {/* Progress indicator */}
       <div className="z-10 absolute left-0 right-0">
         <PlaybackPageIndicator
@@ -273,21 +279,22 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
         onParticleCreated={onLocalParticleCreated}
       />
 
-      {/* Bottom overlay: stream info + reply */}
-      <div className="absolute right-0 bottom-0 z-10">
-        <ControlsIndicator type={"reply"}>
-          <div className="flex items-center gap-1 text-xs text-white/70">
-            {currentParticle && (
-              <SeenIndicator stream={streamParticle} currentParticle={currentParticle} networkId={networkId} />
-            )}
-            {/* Exit countdown */}
-            {exitRemainingMs !== null && (
-              <span>
-                Closing in {Math.ceil(exitRemainingMs / 1000)}s
-              </span>
-            )}
-          </div>
-        </ControlsIndicator>
+      {/* Bottom bar: metadata left, controls right */}
+      <div className="absolute inset-x-0 bottom-0 z-10 flex items-end justify-between px-2 pb-2">
+        {/* Left: seen indicator + exit countdown */}
+        <div className="flex items-center gap-2 text-xs text-white/70">
+          {currentParticle && (
+            <SeenIndicator stream={streamParticle} currentParticle={currentParticle} networkId={networkId} />
+          )}
+          {exitRemainingMs !== null && (
+            <span className="rounded-full bg-black/30 px-2 py-1 backdrop-blur-sm">
+              Closing in {Math.ceil(exitRemainingMs / 1000)}s
+            </span>
+          )}
+        </div>
+
+        {/* Right: recording controls */}
+        <ControlsIndicator type="reply" />
       </div>
     </div>
   );