Size the rail to what it carries

Stretched end to end, a panel with two dashboards showed a pill nine
tenths empty — which was tolerable while the rail was chrome outside the
canvas and obvious once it moved onto the panel itself. It now hugs its
entries and sits centred in the column it reserves; that column is the
same width either way, so no arrangement moves.

A rail longer than the panel is tall still scrolls, and still draws no
bar: a wall panel is swiped, and there is no room for one.
This commit is contained in:
2026-08-24 11:20:32 +02:00
parent 6238728dce
commit 579eb8e61a
4 changed files with 24 additions and 8 deletions
@@ -158,7 +158,11 @@ export function Rail({ entries }: RailProps) {
aria-label="Dashboards on this panel"
data-testid={TESTID.rail}
className={cn(
"gl-surface gl-rail pointer-events-auto absolute inset-y-3 left-3 z-10 flex w-12 flex-col items-center gap-1 p-1",
"gl-surface gl-rail pointer-events-auto absolute left-3 top-1/2 z-10 flex max-h-[calc(100%-1.5rem)] w-12 -translate-y-1/2 flex-col items-center gap-1 p-1",
// As tall as what it carries, centred in the column it reserves: a
// rail of two stretched to the height of the panel is mostly empty
// pill. More dashboards than the panel is tall still scroll, but no
// bar is ever drawn — a wall panel is swiped, and there is no room.
"overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
)}
>
@@ -124,9 +124,11 @@ export function Rail({ entries }: RailProps) {
aria-label="Dashboards on this panel"
data-testid={TESTID.rail}
className={cn(
"m3-rail pointer-events-auto absolute inset-y-3 left-3 z-10 flex w-12 flex-col items-center gap-1 p-1",
// More dashboards than the column is tall still scroll, but no bar is
// ever drawn: a wall panel is swiped, and there is no room for one.
"m3-rail pointer-events-auto absolute left-3 top-1/2 z-10 flex max-h-[calc(100%-1.5rem)] w-12 -translate-y-1/2 flex-col items-center gap-1 p-1",
// As tall as what it carries, centred in the column it reserves: a
// rail of two stretched to the height of the panel is mostly empty
// pill. More dashboards than the panel is tall still scroll, but no
// bar is ever drawn — a wall panel is swiped, and there is no room.
"overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
)}
>