From c1cf9082066d92e5fad1b2f5519339c21dfc3c38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 1 Sep 2026 20:01:10 +0100
Subject: [PATCH] the media preview takes the column

A strip of a photograph tells you it is a photograph and not which one. Full
width, its own aspect, under the button rather than beside it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/sections/PageBuilderPanel.tsx | 51 ++++++++++++++++---------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/web/sections/PageBuilderPanel.tsx b/web/sections/PageBuilderPanel.tsx
index 54abc31..89759f0 100644
--- a/web/sections/PageBuilderPanel.tsx
+++ b/web/sections/PageBuilderPanel.tsx
@@ -654,30 +654,8 @@ export const PageBuilderPanel = () => {
           )}
 
           {(block.kind === 'media' || block.kind === 'video') && (
-            <div className="flex items-center gap-3">
-              {/*
-                What is actually in the block, at a glance.
-
-                A button that says "Choose media…" and nothing else asks somebody to open a dialog to
-                find out what they already chose. A video shows its POSTER rather than playing: the
-                question here is which file this is, and a frame answers it.
-              */}
-              {block.content?.url && (
-                <img
-                  src={
-                    /\.(mp4|mov|webm|m4v)$/i.test(block.content.url)
-                      ? posterUrl(block.content.url)
-                      : thumbUrl(block.content.url, 320)
-                  }
-                  alt=""
-                  className="h-14 w-20 shrink-0 rounded border border-border object-cover"
-                />
-              )}
-
-              <div className="flex min-w-0 flex-col items-start gap-1.5">
-                <span className="max-w-full truncate text-[11px] text-muted-foreground">
-                  {block.content?.url ? block.content.url.split('/').pop() : 'Nothing chosen'}
-                </span>
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-wrap items-center gap-3">
                 <Button
                   size="sm"
                   variant="outline"
@@ -686,7 +664,32 @@ export const PageBuilderPanel = () => {
                 >
                   Choose media…
                 </Button>
+                <span className="min-w-0 flex-1 truncate text-[11px] text-muted-foreground">
+                  {block.content?.url ? block.content.url.split('/').pop() : 'Nothing chosen'}
+                </span>
               </div>
+
+              {/*
+                What is actually in the block, at the width of the column.
+
+                A button that says "Choose media…" and nothing else asks somebody to open a dialog to
+                find out what they already chose. Full width and its own aspect, because a strip of a
+                photograph tells you it is a photograph and not which one.
+
+                A video shows its POSTER rather than playing: the question here is which file this is,
+                and a frame answers it.
+              */}
+              {block.content?.url && (
+                <img
+                  src={
+                    /\.(mp4|mov|webm|m4v)$/i.test(block.content.url)
+                      ? posterUrl(block.content.url)
+                      : thumbUrl(block.content.url, 640)
+                  }
+                  alt=""
+                  className="w-full rounded border border-border"
+                />
+              )}
             </div>
           )}
         </div>,