From d5b35951a5e749d8d2ffc0486faa9fdd8ef3b80b Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@iame.li>
Date: Tue, 2 Jun 2026 12:55:56 -0700
Subject: [PATCH] app: match VOD top controls to live (single safe-area inset)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

VOD was double-insetting the top controls: the ScrollView's paddingTop
pushes the video below the notch, and MobileUi's SafeAreaView re-added the
top inset on top of that, floating the controls ~1/3 down. Drop the
SafeAreaView top edge for VOD so the single container inset stands: black
behind the notch, controls at the top of the video, video below — matching
live.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 js/app/components/mobile/ui.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/js/app/components/mobile/ui.tsx b/js/app/components/mobile/ui.tsx
index c292ed5c..5c6d7107 100644
--- a/js/app/components/mobile/ui.tsx
+++ b/js/app/components/mobile/ui.tsx
@@ -190,7 +190,10 @@ export function MobileUi({
             {/* Main UI Overlay */}
             <View style={[h.percent[100], w.percent[100]]}>
               <SafeAreaView
-                edges={["top"]}
+                // VOD's container already insets the video below the notch, so
+                // the controls only need the small style padding; live fills
+                // the window and clears the notch with the top edge inset.
+                edges={mode === "vod" ? [] : ["top"]}
                 style={[
                   px[2],
                   py[2],
-- 
2.51.2