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
This commit is contained in:
@@ -99,7 +99,7 @@ export default function ChannelDiscovery({
|
||||
key: "about",
|
||||
header: t("channels.cols.about"),
|
||||
hideInCard: true,
|
||||
render: (c) => <AboutCell text={c.description} />,
|
||||
render: (c) => <AboutCell text={c.description} channelId={c.id} />,
|
||||
},
|
||||
subsColumn<DiscoveredChannel>(t),
|
||||
{
|
||||
@@ -165,11 +165,11 @@ export default function ChannelDiscovery({
|
||||
<>
|
||||
{/* Intro + the table controls are fixed chrome; only the table rows scroll (sticky header). */}
|
||||
<PageToolbar>
|
||||
<div className="px-4 pt-3 max-w-7xl mx-auto">
|
||||
<div className="px-4 pt-3 max-w-[96rem] mx-auto">
|
||||
<p className="text-xs text-muted leading-relaxed">{t("channels.discovery.intro")}</p>
|
||||
</div>
|
||||
</PageToolbar>
|
||||
<div className="px-4 pb-4 max-w-7xl mx-auto">
|
||||
<div className="px-4 pb-4 max-w-[96rem] mx-auto">
|
||||
{query.isLoading ? (
|
||||
<div className="text-muted py-8">{t("channels.discovery.loading")}</div>
|
||||
) : (
|
||||
@@ -180,7 +180,7 @@ export default function ChannelDiscovery({
|
||||
persistKey={accountKey(LS.channelDiscoveryTable) ?? undefined}
|
||||
controlsPosition="both"
|
||||
controlsInBand
|
||||
controlsBandClassName="px-4 max-w-7xl mx-auto"
|
||||
controlsBandClassName="px-4 max-w-[96rem] mx-auto"
|
||||
emptyText={t("channels.discovery.empty")}
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user