fix(channels): trim fixedLayout column widths to fit narrower viewports (R14 F5)

Shave the manager table's fixed column widths (fixed sum 720->632px) and
convert priority/actions from px to rem so they scale with the text-size
slider like their siblings: tags 12->9rem, actions 104px->5.5rem,
lastUpload 6.5->6rem, stored 5.5->5rem, length 5->4.5rem, priority
56px->3.5rem. Gives the fluid Channel/About columns ~90px more room, so the
table fits without a horizontal scrollbar down to ~700px containers instead
of overflowing at the md/iPad-portrait band.
This commit is contained in:
2026-08-15 07:20:18 +02:00
parent 5720356191
commit 0842babc77
+6 -6
View File
@@ -183,7 +183,7 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
key: "priority", key: "priority",
header: t("channels.cols.priority"), header: t("channels.cols.priority"),
align: "center", align: "center",
width: "56px", width: "3.5rem",
sortable: true, sortable: true,
hideInCard: true, hideInCard: true,
sortValue: (c) => c.priority, sortValue: (c) => c.priority,
@@ -201,7 +201,7 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
header: t("channels.cols.actions"), header: t("channels.cols.actions"),
align: "left", align: "left",
nowrap: true, nowrap: true,
width: "104px", width: "5.5rem",
cardLabel: false, cardLabel: false,
render: (c) => ( render: (c) => (
<ActionsCell <ActionsCell
@@ -249,7 +249,7 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
header: t("channels.cols.stored"), header: t("channels.cols.stored"),
align: "right", align: "right",
nowrap: true, nowrap: true,
width: "5.5rem", width: "5rem",
sortable: true, sortable: true,
sortValue: (c) => c.stored_videos, sortValue: (c) => c.stored_videos,
// The stored count carries the "fully synced" ✓ charm (R14 folded the retired Sync column in). // The stored count carries the "fully synced" ✓ charm (R14 folded the retired Sync column in).
@@ -260,7 +260,7 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
key: "lastUpload", key: "lastUpload",
header: t("channels.cols.lastUpload"), header: t("channels.cols.lastUpload"),
nowrap: true, nowrap: true,
width: "6.5rem", width: "6rem",
sortable: true, sortable: true,
sortValue: (c) => (c.last_video_at ? new Date(c.last_video_at).getTime() : 0), sortValue: (c) => (c.last_video_at ? new Date(c.last_video_at).getTime() : 0),
render: (c) => <span className="text-muted">{relativeTime(c.last_video_at) || "—"}</span>, render: (c) => <span className="text-muted">{relativeTime(c.last_video_at) || "—"}</span>,
@@ -270,7 +270,7 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
header: t("channels.cols.length"), header: t("channels.cols.length"),
align: "right", align: "right",
nowrap: true, nowrap: true,
width: "5rem", width: "4.5rem",
sortable: true, sortable: true,
sortValue: (c) => c.total_duration_seconds, sortValue: (c) => c.total_duration_seconds,
render: (c) => ( render: (c) => (
@@ -285,7 +285,7 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
cardLabel: false, cardLabel: false,
// Bounded width so the cell can't widen the column and reflow the whole table; the control // Bounded width so the cell can't widen the column and reflow the whole table; the control
// fills it and collapses overflow into "+N" (see ChannelTagsControl). // fills it and collapses overflow into "+N" (see ChannelTagsControl).
width: "12rem", width: "9rem",
filter: { filter: {
kind: "multi", kind: "multi",
options: userTags.map((tg) => ({ value: String(tg.id), label: tg.name })), options: userTags.map((tg) => ({ value: String(tg.id), label: tg.name })),