fix(channel): persist across reload, keep banner aspect, fix avatar z-order

- F5 on a channel page kept bouncing to the feed — the App init dropped history.state._chan
  like the (intentionally non-replayed) YouTube search. Now channelView restores from _chan on
  load and the stamp preserves it, so a reload stays on the channel page.
- The banner was stretched/cropped (bg-cover). Render it as an <img object-contain> with a
  capped height, letterboxed on the surface colour, so its real aspect ratio is kept.
- The round avatar's top was clipped by the banner: the banner's position:relative container
  painted above the static identity row. Give that row relative z-10 so the overlapping avatar
  sits on top.

frontend/src/components/ChannelPage.tsx

@@ -133,16 +133,21 @@ export default function ChannelPage({
       {/* Banner + back */}
       <div className="relative">
         {ch?.banner_url ? (
-          <div
-            className="h-24 sm:h-36 w-full bg-cover bg-center"
-            style={{ backgroundImage: `url(${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">
+            <img
+              src={ch.banner_url}
+              alt=""
+              className="block max-h-40 w-auto max-w-full object-contain"
+            />
+          </div>
         ) : (
           <div className="h-14 w-full bg-surface" />
         )}
         <button
           onClick={onBack}
-          className="absolute top-3 left-3 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-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"
         >
           <ArrowLeft className="w-4 h-4" />
           {t("channel.back")}
@@ -150,8 +155,9 @@ export default function ChannelPage({
       </div>
 
       <div className="px-4 sm:px-6">
-        {/* Identity + actions */}
-        <div className="flex items-end gap-4 -mt-8">
+        {/* Identity + actions. relative+z-10 so the avatar that overlaps up into the banner
+            paints ABOVE it (the banner's positioned container would otherwise cover it). */}
+        <div className="relative z-10 flex items-end gap-4 -mt-8">
           <Avatar
             src={ch?.thumbnail_url ?? null}
             fallback={name}