From e7b51f748967349b01a3100b74b4cda7e6ee7d2e Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@iame.li>
Date: Tue, 2 Jun 2026 10:15:52 -0700
Subject: [PATCH] app: make the VOD metadata divider span full width

The bottom divider lived on the metadata row, which is capped at 720px and
centered, so the line only spanned the metadata. Move it to a full-width
outer wrapper in VodSection (border + vertical padding edge to edge) and
keep the metadata itself in a centered, max-width inner wrapper.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/vod/vod-mobile-metadata.tsx    |  6 +-----
 .../src/components/vod/vod-section.tsx        | 20 +++++++++++++++----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/js/components/src/components/vod/vod-mobile-metadata.tsx b/js/components/src/components/vod/vod-mobile-metadata.tsx
index ec54a9b5..5a851f04 100644
--- a/js/components/src/components/vod/vod-mobile-metadata.tsx
+++ b/js/components/src/components/vod/vod-mobile-metadata.tsx
@@ -5,7 +5,7 @@ import { useAuthor } from "../../hooks/useAuthor";
 import { useAvatar } from "../../hooks/useAvatar";
 import { useTitle } from "../../hooks/useTitle";
 import { useUrl } from "../../streamplace-store";
-import { borders, gap, layout, mb, pb, useTheme } from "../../ui";
+import { gap, layout, useTheme } from "../../ui";
 import { useVideoStore } from "../../video-store/video-store";
 import { Viewers } from "../mobile-player/ui/viewers";
 import { ShareSheet } from "../share/sharesheet";
@@ -52,10 +52,6 @@ export function VodMobileMetadata() {
   return (
     <View
       style={[
-        pb[3],
-        borders.bottom.width.thin,
-        { borderBottomColor: theme.colors.border },
-        mb[3],
         layout.flex.row,
         layout.flex.alignCenter,
         zero.layout.flex.justify.between,
diff --git a/js/components/src/components/vod/vod-section.tsx b/js/components/src/components/vod/vod-section.tsx
index 11d9bc66..aaf0628a 100644
--- a/js/components/src/components/vod/vod-section.tsx
+++ b/js/components/src/components/vod/vod-section.tsx
@@ -1,5 +1,5 @@
 import { View } from "react-native";
-import { px, py } from "../../ui";
+import { borders, px, py, useTheme } from "../../ui";
 import { useVideoStore } from "../../video-store/video-store";
 import { VodMobileMetadata } from "./vod-mobile-metadata";
 
@@ -7,8 +7,13 @@ import { VodMobileMetadata } from "./vod-mobile-metadata";
 // rendered beneath the player at every breakpoint. The live-stream metadata
 // bar (BottomMetadata) is suppressed for VOD, so this is the single source
 // of VOD metadata across all widths.
+//
+// The outer wrapper spans the full content width and carries the bottom
+// divider so it runs edge to edge; the inner wrapper keeps the metadata
+// itself centered at a readable max width.
 export function VodSection() {
   const aturi = useVideoStore((x) => x.aturi);
+  const { theme } = useTheme();
 
   if (!aturi) {
     return null;
@@ -17,12 +22,19 @@ export function VodSection() {
   return (
     <View
       style={[
-        px[4],
         py[4],
-        { maxWidth: 720, alignSelf: "center" as const, width: "100%" },
+        borders.bottom.width.thin,
+        { borderBottomColor: theme.colors.border, width: "100%" },
       ]}
     >
-      <VodMobileMetadata />
+      <View
+        style={[
+          px[4],
+          { maxWidth: 720, alignSelf: "center" as const, width: "100%" },
+        ]}
+      >
+        <VodMobileMetadata />
+      </View>
     </View>
   );
 }
-- 
2.51.2