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:
@@ -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 })),
|
||||||
|
|||||||
Reference in New Issue
Block a user