archilyzer

commit 29aeebab6909f948f82f7ed0d8ef83715b943fea
parent a587e2abcc7e3147a0147095cf32bdbebc4b7ca5
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date:   Thu, 17 Sep 2026 13:38:33 -0400

channels: the row dim is per cell, so the Advanced menu can leave the row

`opacity` below 1 creates a stacking context. The `<tr>` carried
`opacity-60` for the two things that take a row out of a pipeline — excluded
from the build, or tier Paused — so ChannelTierSelect's `absolute z-30`
Advanced popover was confined to its own row and every later row painted over
it and swallowed its clicks (operator report 2026-09-17).

The dim moves onto the cells. The Tier cell — the one that hosts the popover —
is the one cell that is not dimmed, and the reason is written at the site so
nobody moves it back onto the row.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Diffstat:
M
editor/app/channels/components/ChannelsTable.tsx
 | 
54
+++++++++++++++++++++++++++++++-----------------------

1 file changed, 31 insertions(+), 23 deletions(-)
diff --git a/editor/app/channels/components/ChannelsTable.tsx b/editor/app/channels/components/ChannelsTable.tsx
@@ -595,22 +595,27 @@ function ChannelTableRow({
   // through the pinned identity column while the rest scrolls.
   const stickyBg = selected ? "bg-accent" : "bg-background";
   const bridge = "bg-surface w-24 min-w-20";
+  // Dimmed for the two things that take the row out of a pipeline: it is
+  // excluded from the export build, or its base tier is Paused. (The sync
+  // exclusion flag that used to dim it is now a `sync` pin, which is a
+  // per-operation fact and not a property of the whole row.)
+  //
+  // THE DIM IS PER CELL, NEVER ON THE `<tr>`. `opacity` below 1 creates a
+  // STACKING CONTEXT, and a stacking context confines every positioned
+  // descendant to it: put `opacity-60` on the row and the Tier cell's
+  // `absolute z-30` Advanced popover (ChannelTierSelect) can no longer paint
+  // above the rows that follow, however high its z-index — every later row
+  // draws over it and swallows the clicks. So the Tier cell — the one that
+  // hosts the popover — is the one cell that is NOT dimmed. Moving this back
+  // onto the row re-breaks the menu (operator report 2026-09-17).
+  const dim =
+    c.config.excludeFromBuild || c.priority.tier === "paused"
+      ? " opacity-60"
+      : "";
   return (
-    <tr
-      className={
-        "border-t border-border " +
-        (selected ? "bg-accent " : "") +
-        // Dimmed for the two things that take the row out of a pipeline: it is
-        // excluded from the export build, or its base tier is Paused. (The sync
-        // exclusion flag that used to dim it is now a `sync` pin, which is a
-        // per-operation fact and not a property of the whole row.)
-        (c.config.excludeFromBuild || c.priority.tier === "paused"
-          ? "opacity-60"
-          : "")
-      }
-    >
+    <tr className={"border-t border-border " + (selected ? "bg-accent " : "")}>
       <td
-        className={`sticky left-0 z-10 w-9 px-2 py-1.5 align-middle ${stickyBg}`}
+        className={`sticky left-0 z-10 w-9 px-2 py-1.5 align-middle ${stickyBg}${dim}`}
       >
         <input
           type="checkbox"
@@ -621,7 +626,7 @@ function ChannelTableRow({
         />
       </td>
       <Td
-        className={`sticky left-8 z-20 whitespace-nowrap 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}${dim}`}
       >
         <span className="inline-flex items-center gap-1.5">
           <Link
@@ -633,11 +638,11 @@ function ChannelTableRow({
           <MediaLocationBadge media={c.media} compact />
         </span>
       </Td>
-      <Td className="max-w-48 truncate">{c.config.name ?? ""}</Td>
-      <Td className="font-mono text-[11px] text-muted-foreground">
+      <Td className={`max-w-48 truncate${dim}`}>{c.config.name ?? ""}</Td>
+      <Td className={`font-mono text-[11px] text-muted-foreground${dim}`}>
         {c.config.handling}
       </Td>
-      <Td>
+      <Td className={dim}>
         <ChannelBuildToggle
           slug={c.slug}
           excluded={c.config.excludeFromBuild === true}
@@ -653,19 +658,21 @@ function ChannelTableRow({
         />
       </Td>
       <Td
-        className="text-right tabular-nums"
+        className={`text-right tabular-nums${dim}`}
         ariaLabel={`playlist count for ${c.slug}`}
       >
         {c.playlistCount ?? "—"}
       </Td>
-      <Td className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">
+      <Td
+        className={`whitespace-nowrap text-xs tabular-nums text-muted-foreground${dim}`}
+      >
         {formatStamp(c.config.lastSyncedAt)}
       </Td>
       <Td
         ariaLabel={`report age for ${c.slug}`}
         className={`whitespace-nowrap text-xs tabular-nums ${
           c.report.state === "current" ? "text-muted-foreground" : "text-warning"
-        }`}
+        }${dim}`}
       >
         {c.report.state === "current"
           ? formatStamp(c.report.generatedAt)
@@ -680,7 +687,8 @@ function ChannelTableRow({
           className={
             bridge +
             (i === 0 ? " border-l border-border" : "") +
-            (i === columns.length - 1 ? " border-r border-border" : "")
+            (i === columns.length - 1 ? " border-r border-border" : "") +
+            dim
           }
           count={
             col.id === "download"
@@ -691,7 +699,7 @@ function ChannelTableRow({
           }
         />
       ))}
-      <Td className="whitespace-nowrap">
+      <Td className={`whitespace-nowrap${dim}`}>
         <div className="flex items-center gap-2">
           <ChannelSyncButton slug={c.slug} disabled={!c.config.url} />
           <ChannelAvailabilityButton slug={c.slug} disabled={!c.config.url} />