commit 57247cbfce83bfbe37e06f2b9e481fafb4acf09a parent dcd9f100c73ade24489169fad7c43fb56767d531 Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st> Date: Sun, 13 Sep 2026 11:33:05 -0400 channels: close the sticky seam and fit the tier cell on one line Three things the rendered page found that the plan could not: - The tier cell still wrapped at min-w-32 (select + chips + Advanced want ~200px), so rows measured 63px rather than the 40 the plan targets. min-w-52 puts them on one line: rows are 41px, 13 on screen at 1440x900 where 7 fit before. - The checkbox cell rendered ~29px against the Slug cell's left-8 offset, and the sub-pixel gap between two sticky cells showed the scrolled columns through it. The checkbox cell is w-9 now and the Slug cell paints over the overlap (z-20 vs z-10) instead of leaving a seam. Slug is nowrap. - On a 390px viewport the header's button cluster was shrink-0 and ran off the side, taking the eyebrow with it. Full width below md, wrapping, left-aligned; unchanged on md+. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Diffstat:
4 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/editor/app/channels/components/ChannelSelectionDeck.tsx b/editor/app/channels/components/ChannelSelectionDeck.tsx @@ -153,7 +153,7 @@ export function ChannelSelectionDeck({ disabled={busy} onChange={(e) => setRoot(e.target.value)} placeholder="/mnt/platter/archilyzer-media" - className="w-72 md:w-80 rounded-md border border-border bg-card px-2 py-1 text-xs font-mono disabled:opacity-50" + className="w-full max-w-72 md:w-80 md:max-w-none rounded-md border border-border bg-card px-2 py-1 text-xs font-mono disabled:opacity-50" /> <button type="button" diff --git a/editor/app/channels/components/ChannelTierSelect.tsx b/editor/app/channels/components/ChannelTierSelect.tsx @@ -110,7 +110,7 @@ export default function ChannelTierSelect({ // every one of 67 rows — which is what made the rows 90px tall and made the // most-repeated element on the page (the held note, identical on 61 rows) // the one carrying the least information. - <div className="relative flex flex-wrap items-center gap-1.5 min-w-32"> + <div className="relative flex flex-wrap items-center gap-1.5 min-w-52"> <select aria-label={`tier for ${slug}`} value={view.tier} diff --git a/editor/app/channels/components/ChannelsTable.tsx b/editor/app/channels/components/ChannelsTable.tsx @@ -377,7 +377,7 @@ export function ChannelsTable({ <table className="w-full text-sm"> <thead ref={theadRef} className="sticky top-0 z-30 bg-muted"> <tr> - <th className="sticky left-0 z-40 w-8 bg-muted px-2 py-1.5 align-bottom shadow-[1px_0_0_var(--color-border)]"> + <th className="sticky left-0 z-10 w-9 bg-muted px-2 py-1.5 align-bottom"> <input type="checkbox" aria-label="select all channels" @@ -397,7 +397,7 @@ export function ChannelsTable({ sortKey="slug" sort={sort} onClick={onHeaderClick} - className="sticky left-8 z-40 bg-muted shadow-[1px_0_0_var(--color-border)]" + className="sticky left-8 z-20 bg-muted shadow-[1px_0_0_var(--color-border)]" /> <SortableTh label="Name" @@ -610,7 +610,7 @@ function ChannelTableRow({ } > <td - className={`sticky left-0 z-10 w-8 px-2 py-1.5 align-middle shadow-[1px_0_0_var(--color-border)] ${stickyBg}`} + className={`sticky left-0 z-10 w-9 px-2 py-1.5 align-middle ${stickyBg}`} > <input type="checkbox" @@ -621,7 +621,7 @@ function ChannelTableRow({ /> </td> <Td - className={`sticky left-8 z-10 font-mono shadow-[1px_0_0_var(--color-border)] ${stickyBg}`} + className={`sticky left-8 z-20 whitespace-nowrap font-mono shadow-[1px_0_0_var(--color-border)] ${stickyBg}`} > <span className="inline-flex items-center gap-1.5"> <Link diff --git a/editor/app/channels/page.tsx b/editor/app/channels/page.tsx @@ -315,11 +315,11 @@ export default async function ChannelsPage({ channel and is the page's actual call to action. So the three are outlines under an eyebrow that says what they act on, and only "New channel" is filled. */} - <div className="flex shrink-0 flex-col items-end gap-1"> + <div className="flex w-full flex-col items-start gap-1 md:w-auto md:items-end"> <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground"> Every channel </span> - <div className="flex flex-wrap items-center justify-end gap-2"> + <div className="flex flex-wrap items-center gap-2 md:justify-end"> <SyncAllChannelsButton /> <RefreshAllReportsButton /> <Link