refactor(managers): full About overlay + center the wider channel content (E4 S2 follow-up)

- The About overlay now shows the FULL channel About (description, external links,
  country, language, topics, keywords) — the same content as the detail page's About
  tab, via a new shared ChannelAboutContent component (reused by ChannelPage + AboutCell)
- AboutCell fetches the channel detail ON DEMAND on hover (shared [channel,id] react-query
  cache with the channel page), so the list stays light; the overlay is interactive
  (scrollable + clickable links) via a small hover-bridge, and closes on page scroll/resize
- Center the content: max-w-7xl -> max-w-[96rem] on the channel tables + header, so the
  wider About table stays symmetric with the header (mx-auto handles the responsive centering)
- Topic chips are display-only for now; the future search epic makes them clickable

frontend/src/components/ChannelAbout.tsx

@@ -0,0 +1,119 @@
+import { useTranslation } from "react-i18next";
+import { ExternalLink } from "lucide-react";
+import type { ChannelDetail } from "../lib/api";
+
+// --- About-tab metadata helpers (shared by the channel page and the manager's About overlay) ---
+// ISO 3166-1 alpha-2 code → 🇺🇸 regional-indicator flag emoji.
+function countryFlag(code: string): string {
+  if (!/^[A-Za-z]{2}$/.test(code)) return "";
+  return String.fromCodePoint(...[...code.toUpperCase()].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65));
+}
+function displayName(code: string, lang: string, type: "region" | "language"): string {
+  try {
+    return new Intl.DisplayNames([lang], { type }).of(type === "region" ? code.toUpperCase() : code) ?? code;
+  } catch {
+    return code;
+  }
+}
+// YouTube keywords are ONE space-separated string with multi-word tags quoted: gaming "let's play".
+function parseKeywords(s: string): string[] {
+  return (s.match(/"[^"]+"|\S+/g) ?? []).map((k) => k.replace(/^"|"$/g, "")).filter(Boolean);
+}
+// topicCategories are Wikipedia URLs (…/wiki/Music) → a readable label, de-duplicated.
+function topicLabels(urls: string[]): string[] {
+  const seen = new Set<string>();
+  for (const url of urls) {
+    const seg = url.split("/wiki/")[1] ?? url.split("/").pop() ?? url;
+    let label = seg;
+    try {
+      label = decodeURIComponent(seg);
+    } catch {
+      /* keep raw */
+    }
+    label = label.replace(/_/g, " ").trim();
+    if (label) seen.add(label);
+  }
+  return [...seen];
+}
+
+/**
+ * The channel "About" content — description, external links, and the enriched metadata
+ * (country, language, topics, keywords). Shared by the channel detail page's About tab and the
+ * Channel manager's About-column hover overlay, so both show exactly the same thing.
+ */
+export default function ChannelAboutContent({ ch }: { ch: ChannelDetail }) {
+  const { t, i18n } = useTranslation();
+  const topics = ch.topic_categories?.length ? topicLabels(ch.topic_categories) : [];
+  const keywords = ch.keywords ? parseKeywords(ch.keywords) : [];
+  const hasAboutDetails =
+    !!ch.country || !!ch.default_language || topics.length > 0 || keywords.length > 0;
+
+  return (
+    <>
+      {ch.description ? (
+        <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">{ch.description}</p>
+      ) : (
+        <p className="text-sm text-muted">{t("channel.noDescription")}</p>
+      )}
+      {ch.external_links && ch.external_links.length > 0 && (
+        <div className="mt-4 flex flex-wrap gap-2">
+          {ch.external_links.map((l, i) => (
+            <a
+              key={i}
+              href={l.url}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1.5 text-sm text-accent hover:underline"
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+              {l.title || l.url}
+            </a>
+          ))}
+        </div>
+      )}
+      {hasAboutDetails && (
+        <div className="mt-5 space-y-2.5 text-sm border-t border-border pt-4">
+          {ch.country && (
+            <div className="flex gap-2">
+              <span className="text-muted w-24 shrink-0">{t("channel.country")}</span>
+              <span>
+                {countryFlag(ch.country)} {displayName(ch.country, i18n.language, "region")}
+              </span>
+            </div>
+          )}
+          {ch.default_language && (
+            <div className="flex gap-2">
+              <span className="text-muted w-24 shrink-0">{t("channel.language")}</span>
+              <span>{displayName(ch.default_language, i18n.language, "language")}</span>
+            </div>
+          )}
+          {topics.length > 0 && (
+            <div className="flex gap-2">
+              <span className="text-muted w-24 shrink-0 pt-0.5">{t("channel.topics")}</span>
+              <div className="flex flex-wrap gap-1.5">
+                {/* Future search epic: these topic chips become clickable filters. */}
+                {topics.map((tp) => (
+                  <span key={tp} className="glass-card px-2 py-0.5 rounded-full text-xs">
+                    {tp}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+          {keywords.length > 0 && (
+            <div className="flex gap-2">
+              <span className="text-muted w-24 shrink-0 pt-0.5">{t("channel.keywords")}</span>
+              <div className="flex flex-wrap gap-1.5">
+                {keywords.map((kw, i) => (
+                  <span key={i} className="glass-card px-2 py-0.5 rounded-full text-xs">
+                    {kw}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}