fix(site-finder): visible by-quarter pipeline bars

Bars rendered as ~1-15px because outer flex container had
align-items:flex-end which made each column shrink to label
height (~15.8px), so bar percentage heights resolved against
that instead of the intended 80px container.

Switched to align-items:stretch + fixed-pixel bar heights
anchored to a 60px area (reserves ~20px for label row). Each
column now uses justify-content:flex-end so bars + labels sit
at the bottom baseline.
This commit is contained in:
lekss361 2026-05-15 10:31:32 +03:00
parent faa99abb94
commit ca5d0acbff

View file

@ -205,16 +205,25 @@ export function Pipeline24moBlock({ data }: Props) {
<div <div
style={{ style={{
display: "flex", display: "flex",
alignItems: "flex-end", alignItems: "stretch",
gap: 4, gap: 4,
height: 80, height: 80,
}} }}
> >
{data.by_quarter.map((q) => { {data.by_quarter.map((q) => {
const heightPct = // Bar height in pixels of the 60px area above label row
// (reserves ~16px for label). Using fixed px avoids the
// align-items:flex-end shrink-to-content trap where %-heights
// would resolve to the column's content height instead of
// the outer 80px container.
const BAR_AREA_PX = 60;
const barPx =
maxFlatsPerQuarter > 0 maxFlatsPerQuarter > 0
? Math.max(6, (q.flats / maxFlatsPerQuarter) * 100) ? Math.max(
: 6; 4,
(q.flats / maxFlatsPerQuarter) * BAR_AREA_PX,
)
: 4;
return ( return (
<div <div
key={q.quarter} key={q.quarter}
@ -222,6 +231,7 @@ export function Pipeline24moBlock({ data }: Props) {
flex: 1, flex: 1,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "flex-end",
alignItems: "center", alignItems: "center",
gap: 3, gap: 3,
}} }}
@ -229,7 +239,7 @@ export function Pipeline24moBlock({ data }: Props) {
<div <div
style={{ style={{
width: "100%", width: "100%",
height: `${heightPct}%`, height: barPx,
background: c.fg, background: c.fg,
opacity: 0.5, opacity: 0.5,
borderRadius: "3px 3px 0 0", borderRadius: "3px 3px 0 0",