tweaks to mobile

js/desktop/src/features/particles/media-particle-view.tsx

@@ -159,7 +159,7 @@ export const MediaParticleView = forwardRef<MediaParticleHandle, MediaParticleVi
         playsInline
         onEnded={onEnded}
         onTimeUpdate={handleTimeUpdate}
-        className={`h-full w-full ${particle.properties.source === "screen" ? "object-contain bg-black" : "object-cover"}`}
+        className="h-full w-full object-contain bg-black"
       />
 
       {transcript && (

js/mobile/src/features/settings/AccountScreen.tsx

@@ -20,7 +20,6 @@ export function AccountScreen({ navigation }: RootStackScreenProps<"Account">) {
 
       <View className="px-6 py-6 gap-4">
         <Field label="Email" value={user?.email ?? "—"} />
-        <Field label="Account ID" value={user?.id ?? "—"} />
       </View>
     </SafeAreaView>
   );

js/mobile/src/features/stream-view/StreamView.tsx

@@ -16,6 +16,7 @@ import Animated, {
   withSpring,
   withTiming,
 } from "react-native-reanimated";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
 import { isParticleDeleted, type Particle } from "@/api/types";
 import {
   parseParticlePath,
@@ -60,6 +61,9 @@ const DISMISS_VELOCITY = 900;
 // Swipe-up reactions commit thresholds — flick up ~80px or with enough velocity.
 const REACTIONS_DISTANCE = 80;
 const REACTIONS_VELOCITY = 600;
+// Approx height of the ComposeDock from the screen bottom (record button stack
+// + pb-10). Status pills sit just above this so they aren't hidden behind it.
+const COMPOSE_DOCK_HEIGHT = 152;
 
 interface StreamViewProps {
   streamParticle: Particle & { type: "stream" };
@@ -358,14 +362,29 @@ function StreamViewInner({ streamParticle, path, onExit }: StreamViewProps) {
 
             {/* Top chrome: segmented bar + metadata. Painted over the canvas
                 so the canvas can be edge-to-edge but content gets a safe-area
-                gradient to read against. */}
+                gradient to read against. A real linear gradient (vs a flat
+                bg-black/40 block) avoids the hard "bar" edge under the chrome. */}
             <View
               pointerEvents="none"
-              className="absolute inset-x-0 top-0 h-40 bg-black/40"
-              style={{
-                paddingTop: insets.top,
-              }}
-            />
+              className="absolute inset-x-0 top-0"
+              style={{ height: insets.top + 120 }}
+            >
+              <Svg width="100%" height="100%">
+                <Defs>
+                  <LinearGradient
+                    id="streamTopFade"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <Stop offset="0" stopColor="#000000" stopOpacity="0.55" />
+                    <Stop offset="1" stopColor="#000000" stopOpacity="0" />
+                  </LinearGradient>
+                </Defs>
+                <Rect width="100%" height="100%" fill="url(#streamTopFade)" />
+              </Svg>
+            </View>
             <View
               pointerEvents="none"
               className="absolute inset-x-0"
@@ -396,11 +415,11 @@ function StreamViewInner({ streamParticle, path, onExit }: StreamViewProps) {
             </View>
 
             {/* Bottom chrome: paused pill + exit countdown. Sit above the
-                home-indicator safe-area so they aren't visually clipped. */}
+                compose dock so the record button doesn't cover them. */}
             <View
               pointerEvents="none"
               className="absolute inset-x-0 bottom-0 items-center"
-              style={{ paddingBottom: insets.bottom + 16 }}
+              style={{ paddingBottom: insets.bottom + COMPOSE_DOCK_HEIGHT }}
             >
               {paused ? (
                 <View className="bg-white/15 rounded-full px-3 py-1">