feat(managers): richer channel cards + drop the rows layout, cap the channel column

UAT round 1 feedback:
- Retire the `rows` layout — it barely differed from the table; keep Table + Cards.
- The card now shows the About cell (+ its hover overlay) and the priority stepper
  in every layout, not just the table: ChannelLayoutGrid gains named slots
  (lead / about / actions) and stops hiding the `hideInCard` columns, since the
  roomy desktop card has space the cramped mobile fallback did not.
- Fix the table losing its centering with "Rows per page: All": a long-titled
  channel stretched the uncapped Channel column (~289→429px) and overflowed the
  centered table. Cap it with a max-w element inside the cell (table-layout:auto
  ignores a cell max-width), the same trick AboutCell already uses. Gaps now 163/162.
This commit is contained in:
2026-07-19 22:42:09 +02:00
parent b659ad800c
commit 875c7ad741
6 changed files with 80 additions and 85 deletions
+12 -8
View File
@@ -89,14 +89,18 @@ export default function ChannelDiscovery({
sortValue: (c) => (c.title ?? c.id).toLowerCase(),
filter: { kind: "text", get: (c) => `${c.title ?? ""} ${c.handle ?? ""}` },
cardPrimary: true,
// Cap the width (a max-w element inside the cell; table-layout:auto ignores a cell max-width) so
// a long-titled channel can't stretch the column and overflow the centered table.
render: (c) => (
<ChannelLink
id={c.id}
title={c.title}
handle={c.handle}
thumbnailUrl={c.thumbnail_url}
onView={() => onViewChannel(c.id, c.title ?? c.id)}
/>
<div className="max-w-[18rem]">
<ChannelLink
id={c.id}
title={c.title}
handle={c.handle}
thumbnailUrl={c.thumbnail_url}
onView={() => onViewChannel(c.id, c.title ?? c.id)}
/>
</div>
),
},
{
@@ -192,7 +196,7 @@ export default function ChannelDiscovery({
rows={rows}
columns={columns}
rowKey={(c) => c.id}
layout={layout}
aboutKey="about"
actionsKey="actions"
emptyText={t("channels.discovery.empty")}
/>