commit e4429059d864fd7c1239574f666482e2f9a0ac3d
parent 64efeae33e29574992cc22dd860d8506bfcd9860
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date: Sun, 13 Sep 2026 11:18:03 -0400
channels: the tier cell is one line, and being held is a chip
The tier cell was a four-deep vertical stack - select, chip row, an orange
held sentence, a disclosure - in every one of 67 rows. That stack is what
made the rows ~90px tall, and with a corpus-wide focus active the "Held -
focus: omnimirror" line repeated identically on 61 of them: the most
repeated element on the page carried the least per-row information.
It is now one flex line. The held note becomes a warning pill reading
"held", with the full reason as screen-reader text and on title - so the
element STILL contains "Held - focus: ..." for the suite and for a reader
who needs the sentence, at a tenth of the width. The focus line above the
table states the sentence once, with the count.
Advanced opens into an absolutely positioned panel over the rows below
instead of pushing 60 rows down by 150px.
role="note", aria-label="held reason for {slug}", data-testid="focused-..."
and every override control keep their names exactly.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Diffstat:
1 file changed, 46 insertions(+), 30 deletions(-)
diff --git a/editor/app/channels/components/ChannelTierSelect.tsx b/editor/app/channels/components/ChannelTierSelect.tsx
@@ -105,7 +105,12 @@ export default function ChannelTierSelect({
}
return (
- <div className="flex flex-col gap-1 min-w-36">
+ // ONE LINE, not a four-deep stack. The tier cell used to be a select, a
+ // chip row, an orange held sentence and a disclosure stacked vertically in
+ // 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">
<select
aria-label={`tier for ${slug}`}
value={view.tier}
@@ -116,7 +121,7 @@ export default function ChannelTierSelect({
setChannelTierAction([slug], next),
);
}}
- className="rounded-md border border-border bg-card px-2 py-1 text-xs disabled:opacity-50"
+ className="h-7 rounded-md border border-border bg-card px-2 text-xs disabled:opacity-50"
>
{STORED_CHANNEL_TIERS.map((t) => (
<option key={t} value={t}>
@@ -124,44 +129,55 @@ export default function ChannelTierSelect({
</option>
))}
</select>
- <div className="flex flex-wrap items-center gap-1 text-[11px]">
- {focused && (
- <span
- className="rounded-full border border-primary/40 bg-primary/10 px-1.5 py-0.5 text-primary"
- data-testid={`focused-${slug}`}
- >
- Focused
- </span>
- )}
- {pins.length > 0 && (
- <span
- className="rounded-full border border-border px-1.5 py-0.5 text-muted-foreground"
- title={pins
- .map((op) => `${OPERATION_LABEL[op]}: ${TIER_LABEL[view.overrides[op]!]}`)
- .join(" · ")}
- >
- {pins.length} pinned
- </span>
- )}
- </div>
- {error && (
+ {focused && (
<span
- role="alert"
- aria-label={`priority error for ${slug}`}
- className="text-[11px] text-destructive"
+ className="rounded-full border border-primary/40 bg-primary/10 px-1.5 text-[10px] uppercase tracking-wide text-primary"
+ data-testid={`focused-${slug}`}
>
- {error}
+ Focused
</span>
)}
+ {pins.length > 0 && (
+ <span
+ className="rounded-full border border-border px-1.5 text-[10px] text-muted-foreground"
+ title={pins
+ .map((op) => `${OPERATION_LABEL[op]}: ${TIER_LABEL[view.overrides[op]!]}`)
+ .join(" · ")}
+ >
+ {pins.length} pinned
+ </span>
+ )}
+ {/* THE HELD CHIP. A corpus-wide focus holds every channel outside it, so
+ the SENTENCE is the same on 61 rows and belongs above the table, where
+ the focus line states it once. What is per-row is the FACT, and a chip
+ says it in a tenth of the width. The full reason is still carried on
+ the element — as screen-reader text and on `title` — so nothing is
+ lost to the reader who needs it, and the element's text still contains
+ the sentence the suite pins. */}
{heldReason && (
<span
role="note"
- className="text-[11px] text-warning"
aria-label={`held reason for ${slug}`}
+ title={heldReason}
+ className="rounded-full border border-warning/30 bg-warning-soft px-1.5 text-[10px] uppercase tracking-wide text-warning"
>
- {heldReason}
+ held
+ <span className="sr-only"> — {heldReason}</span>
</span>
)}
+ {error && (
+ <span
+ role="alert"
+ aria-label={`priority error for ${slug}`}
+ className="basis-full text-[11px] text-destructive"
+ >
+ {error}
+ </span>
+ )}
+
+ {/* OPENING THIS MUST NOT MOVE THE RACK. In a 40px row an inline panel
+ would push every row below it down by 150px, so the panel is absolute
+ and overlays them instead. */}
<details className="text-[11px]">
<summary
aria-label={`advanced priority for ${slug}`}
@@ -169,7 +185,7 @@ export default function ChannelTierSelect({
>
Advanced
</summary>
- <div className="mt-1 flex flex-col gap-1">
+ <div className="absolute z-30 mt-1 flex w-64 flex-col gap-1 rounded-md border border-border bg-popover p-2 shadow-md">
{PRIORITY_OPERATIONS.map((op) => (
<label key={op} className="flex items-center justify-between gap-2">
<span className="text-muted-foreground">
