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:
@@ -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",
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user