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>
   );
 }