From b4327635fa3036ac485dd025ce8b96a865a27d28 Mon Sep 17 00:00:00 2001
From: lekss361 <47113017+lekss361@users.noreply.github.com>
Date: Fri, 15 May 2026 10:35:51 +0300
Subject: [PATCH] fix(site-finder): visible by-quarter pipeline bars (#167)

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.

Co-authored-by: lekss361 <claudestars@proton.me>
---
 .../site-finder/Pipeline24moBlock.tsx         | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/site-finder/Pipeline24moBlock.tsx b/frontend/src/components/site-finder/Pipeline24moBlock.tsx
index 70d60717..c0c12838 100644
--- a/frontend/src/components/site-finder/Pipeline24moBlock.tsx
+++ b/frontend/src/components/site-finder/Pipeline24moBlock.tsx
@@ -205,16 +205,25 @@ export function Pipeline24moBlock({ data }: Props) {
               <div
                 style={{
                   display: "flex",
-                  alignItems: "flex-end",
+                  alignItems: "stretch",
                   gap: 4,
                   height: 80,
                 }}
               >
                 {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
-                      ? Math.max(6, (q.flats / maxFlatsPerQuarter) * 100)
-                      : 6;
+                      ? Math.max(
+                          4,
+                          (q.flats / maxFlatsPerQuarter) * BAR_AREA_PX,
+                        )
+                      : 4;
                   return (
                     <div
                       key={q.quarter}
@@ -222,6 +231,7 @@ export function Pipeline24moBlock({ data }: Props) {
                         flex: 1,
                         display: "flex",
                         flexDirection: "column",
+                        justifyContent: "flex-end",
                         alignItems: "center",
                         gap: 3,
                       }}
@@ -229,7 +239,7 @@ export function Pipeline24moBlock({ data }: Props) {
                       <div
                         style={{
                           width: "100%",
-                          height: `${heightPct}%`,
+                          height: barPx,
                           background: c.fg,
                           opacity: 0.5,
                           borderRadius: "3px 3px 0 0",