From 78d81f81d05230778c3565312341a8c1ba4cd33c Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 30 Jun 2026 04:32:43 +0200
Subject: [PATCH] fix(channel): render the banner wide like YouTube
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stored bannerExternalUrl is the full 16:9 banner template at a low default size (512x288),
so object-contain showed the whole padded image tiny and centered. Now request a crisp wide
version (=w1707) and object-cover the desktop safe-area band (centre 2560x423, ~6:1) at full
width — matching YouTube's banner crop.
---
 frontend/src/components/ChannelPage.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/components/ChannelPage.tsx
index 25906c7..4488d5b 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/components/ChannelPage.tsx
@@ -133,13 +133,14 @@ export default function ChannelPage({
       {/* Banner + back */}
       <div className="relative">
         {ch?.banner_url ? (
-          // Keep the banner's real aspect ratio (object-contain, capped height); letterbox with
-          // the surface colour rather than stretching/cropping it to fill.
-          <div className="w-full flex justify-center bg-surface">
+          // Match YouTube's banner: the stored bannerExternalUrl is the full 16:9 template at a
+          // low default size, so request a crisp wide version (=w1707) and object-cover the
+          // desktop "safe area" — the centre 2560×423 (~6:1) band — at full width.
+          <div className="w-full overflow-hidden bg-surface" style={{ aspectRatio: "2560 / 423" }}>
             <img
-              src={ch.banner_url}
+              src={`${ch.banner_url}=w1707`}
               alt=""
-              className="block max-h-40 w-auto max-w-full object-contain"
+              className="w-full h-full object-cover object-center"
             />
           </div>
         ) : (