archilyzer

commit 5058856f248595473c880e16c1322314ab2d8e27
parent 119d590e9f0da5bed0ea652be72f695deecaa358
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date:   Thu, 24 Sep 2026 19:48:48 -0400

channels: below md an opened Advanced panel stops above the deck

Review F3: with the rack isolated, the screen-pinned selection deck
paints over a popover it overlaps (a pinned bar on top is the right
order), and the scroll-into-view put the panel's bottom exactly under
it. The panel keeps a 12rem scroll margin below md, about the deck's
height, so "nearest" stops it above the deck.

Review F5: the region comment names the layers by their RACK_LAYERS
keys, so the z-literal grep over the components is empty outside
rackLayout.ts.

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

Diffstat:
M
editor/app/channels/components/ChannelTierSelect.tsx
 | 
8
++++++--
M
editor/app/channels/components/ChannelsRack.tsx
 | 
6
+++---

2 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/editor/app/channels/components/ChannelTierSelect.tsx b/editor/app/channels/components/ChannelTierSelect.tsx
@@ -205,7 +205,11 @@ export default function ChannelTierSelect({
           region with its selects out of reach, and nothing said it was there.
           Opening scrolls the region — and the document, below md — just far
           enough to show the whole panel; `nearest` leaves an already-visible
-          one exactly where it is. */}
+          one exactly where it is. Below md the selection deck pins to the
+          bottom of the SCREEN, outside the (isolated) rack, and paints over
+          it — so the panel keeps a 12rem scroll margin there, about the
+          deck's height, and "nearest" stops it above the deck instead of
+          under it. */}
       <details
         className="text-[11px]"
         onToggle={(e) => {
@@ -225,7 +229,7 @@ export default function ChannelTierSelect({
         >
           Advanced
         </summary>
-        <div className={`absolute ${RACK_LAYERS.popover} mt-1 flex w-64 flex-col gap-1 rounded-md border border-border bg-popover p-2 shadow-md`}>
+        <div className={`absolute ${RACK_LAYERS.popover} max-md:scroll-mb-48 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">
diff --git a/editor/app/channels/components/ChannelsRack.tsx b/editor/app/channels/components/ChannelsRack.tsx
@@ -212,9 +212,9 @@ export function ChannelsRack({
           the region's.
           `isolate` makes the region its own stacking context, so the whole
           ladder (rackLayout.ts) is ordered INSIDE it: without it the pinned
-          cells and the z-30 thead competed with the page itself, and below
-          md the thead scrolling under the screen-pinned selection deck
-          (z-20) painted over it. */}
+          cells and the thead competed with the page itself, and below md
+          the thead scrolling under the screen-pinned selection deck
+          (RACK_LAYERS.deck) painted over it. */}
       <div
         ref={regionRef}
         data-testid="channels-rack"