From 5e588d15ffa297f184827e860e720bc01eec47f9 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 30 Jun 2026 04:48:46 +0200
Subject: [PATCH] polish(channel): inset, rounded banner card (option C)

Instead of a full-bleed banner, inset it with a margin and rounded corners so it reads as a
contained card; the avatar overlaps its bottom-left. Airier and more designed than edge-to-edge.
---
 frontend/src/components/ChannelPage.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/components/ChannelPage.tsx
index 1572aa7..fc856f7 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/components/ChannelPage.tsx
@@ -138,14 +138,14 @@ export default function ChannelPage({
 
   return (
     <main className="flex-1 min-w-0 overflow-y-auto">
-      {/* Banner + back */}
-      <div className="relative">
+      {/* Banner + back — OPTION C: inset, rounded card (not full-bleed) */}
+      <div className="relative px-4 sm:px-6 pt-3">
         {ch?.banner_url ? (
           // 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.
+          // desktop "safe area" — the centre 2560×423 (~6:1) band.
           <div
-            className="w-full overflow-hidden bg-surface"
+            className="w-full overflow-hidden rounded-2xl bg-surface"
             style={{ aspectRatio: "2560 / 423", maxHeight: "150px" }}
           >
             <img
@@ -155,11 +155,11 @@ export default function ChannelPage({
             />
           </div>
         ) : (
-          <div className="h-14 w-full bg-surface" />
+          <div className="h-14 w-full rounded-2xl bg-surface" />
         )}
         <button
           onClick={onBack}
-          className="absolute top-3 left-3 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
+          className="absolute top-5 left-7 sm:left-9 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
         >
           <ArrowLeft className="w-4 h-4" />
           {t("channel.back")}