From 8f880cc3c7facdf9e55931e866d7c35ba9b6f510 Mon Sep 17 00:00:00 2001
From: Nicolas CHAUVIN <nicolas.chauvin@gmail.com>
Date: Thu, 10 Sep 2026 17:23:44 +0200
Subject: [PATCH] fix(web): let the player fill the stage

---
 apps/web/e2e/capture.spec.ts                              | 5 ++++-
 apps/web/src/widgets/capture-carousel/CaptureCarousel.vue | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/e2e/capture.spec.ts b/apps/web/e2e/capture.spec.ts
index f8545f3..27bd56d 100644
--- a/apps/web/e2e/capture.spec.ts
+++ b/apps/web/e2e/capture.spec.ts
@@ -126,7 +126,10 @@ test('signing in, kept as evidence', async ({ page, browser }) => {
   const recordings: Recording[] = []
   for (const theme of ['light', 'dark'] as const) {
     const filming = await browser.newContext({
-      recordVideo: { dir: test.info().outputPath('videos') },
+      // Pinned to the viewport: without a size Playwright scales the frame
+      // down to fit 800×800, and the pushed video arrives small (#232).
+      recordVideo: { dir: test.info().outputPath('videos'), size: { width: 1280, height: 720 } },
+      viewport: { width: 1280, height: 720 },
       storageState: { cookies: [], origins: [] },
       colorScheme: theme,
       baseURL: test.info().project.use.baseURL,
diff --git a/apps/web/src/widgets/capture-carousel/CaptureCarousel.vue b/apps/web/src/widgets/capture-carousel/CaptureCarousel.vue
index 7e986d1..25a3d4f 100644
--- a/apps/web/src/widgets/capture-carousel/CaptureCarousel.vue
+++ b/apps/web/src/widgets/capture-carousel/CaptureCarousel.vue
@@ -455,11 +455,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
       <!-- The player: the browser's own controls, streaming the sniffed
            content type. The pair below judges these exact bytes (ADR 0023). -->
       <span v-if="rec" class="flex h-full w-full min-h-0 items-center justify-center">
+        <!-- Unlike a capture, the video scales up: nothing pixel-accurate is
+             being judged here (ADR 0013), and a small source in a big stage
+             is just hard to watch (#232). object-contain letterboxes. -->
         <video
           :src="`/api/projects/${slug}/recordings/${rec.id}`"
           controls
           :aria-label="`recording — ${variant?.label}`"
-          class="max-h-full max-w-full border border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900"
+          class="h-full w-full border border-slate-300 bg-white object-contain dark:border-slate-600 dark:bg-slate-900"
         ></video>
       </span>
     </div>