From 4d6e59b80a574df2fe8da88ae90d689a71d2c537 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 26 Sep 2026 00:39:10 +0200
Subject: [PATCH] =?UTF-8?q?feat(design):=20the=20public=20watch=20page=20o?=
 =?UTF-8?q?n=20the=20app's=20surfaces=20(B6)=20=E2=80=94=20the=20scheme=20?=
 =?UTF-8?q?backdrop,=20the=20title=20and=20actions=20on=20a=20glass=20pane?=
 =?UTF-8?q?l,=20a=20glass=20Download=20(E28=20S3d4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/WatchPage.dom.test.tsx     | 21 +++++++++++++++++++
 frontend/src/components/WatchPage.tsx         |  9 ++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/WatchPage.dom.test.tsx b/frontend/src/components/WatchPage.dom.test.tsx
index 74ef5eff..15951517 100644
--- a/frontend/src/components/WatchPage.dom.test.tsx
+++ b/frontend/src/components/WatchPage.dom.test.tsx
@@ -84,6 +84,27 @@ describe("WatchPage action row", () => {
     expect(repeat.className).toContain("h-7");
     expect(download.className).toContain("h-7");
   });
+
+  // E28 S3d4 (B6): the page the stranger sees wears the app's surfaces — the scheme's ambient
+  // backdrop (no page fill over the body's), the title and actions on a glass panel, a glass Download.
+  it("sits on the app's surfaces: backdrop, a glass panel, a glass Download", async () => {
+    window.history.replaceState({}, "", "/watch/tok-b6");
+    mockMeta({
+      needs_password: false,
+      audio: false,
+      allow_download: true,
+      file_url: "/f.mp4",
+      title: "A clip",
+    });
+    const view = render(<WatchPage />);
+    const title = await view.findByRole("heading", { name: "A clip" });
+    expect((view.container.firstElementChild as HTMLElement).className).not.toMatch(
+      /(^|\s)bg-bg(\s|$)/,
+    );
+    expect(title.closest(".glass")).toBeTruthy();
+    const download = view.container.querySelector('a[href="/f.mp4"]')!;
+    expect(download.className).toContain("glass-card");
+  });
 });
 
 describe("WatchPage media element (S3 · 5a)", () => {
diff --git a/frontend/src/components/WatchPage.tsx b/frontend/src/components/WatchPage.tsx
index 20f9171c..3173d002 100644
--- a/frontend/src/components/WatchPage.tsx
+++ b/frontend/src/components/WatchPage.tsx
@@ -230,7 +230,8 @@ export default function WatchPage() {
   };
 
   return (
-    <div className="min-h-screen bg-bg text-fg flex flex-col items-center">
+    // No page fill of its own (B6): the body's ambient scheme backdrop shows through, as in the app.
+    <div className="min-h-dvh text-fg flex flex-col items-center">
       <div className="w-full max-w-4xl px-4 py-6 flex-1 flex flex-col">
         <div className="flex items-center gap-2 mb-5 text-sm text-muted">
           <PlayCircle className="w-5 h-5 text-accent" />
@@ -364,13 +365,13 @@ export default function WatchPage() {
                   loop={repeat}
                   src={meta.file_url}
                   poster={meta.poster_url || undefined}
-                  className="max-h-[80vh] max-w-full mx-auto block"
+                  className="max-h-[80dvh] max-w-full mx-auto block"
                 />
               </div>
             )}
             {/* The actions wrap under the title when the row is too narrow for both (a phone), rather
                 than squeezing the title into a column a word wide. */}
-            <div className="mt-3 flex flex-wrap items-start gap-x-3 gap-y-2">
+            <div className={`${SURFACE.panel} mt-3 flex flex-wrap items-start gap-x-3 gap-y-2 p-3`}>
               <div className="min-w-0 flex-1 basis-60">
                 <h1 className="text-lg font-semibold leading-snug break-words">
                   {meta.title || "Video"}
@@ -403,7 +404,7 @@ export default function WatchPage() {
                 </Chip>
                 {/* The toolbar rung, level with the Repeat chip beside it (one row, one height). */}
                 {meta.allow_download && (
-                  <LinkButton href={meta.file_url} icon={<Download />} size="sm">
+                  <LinkButton href={meta.file_url} icon={<Download />} size="sm" variant="glass">
                     {T.download}
                   </LinkButton>
                 )}