From 351d8144d915db286f30d183b21d23fee7f4416b Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sat, 21 Feb 2026 19:58:13 +0100
Subject: [PATCH] Fix score distribution chart bars not rendering in admin
 round page

CSS percentage heights require parent with resolved height. Changed layout
to use flex-1 with absolute bottom-anchored bars instead of percentage-height containers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/(admin)/admin/rounds/[roundId]/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/(admin)/admin/rounds/[roundId]/page.tsx b/src/app/(admin)/admin/rounds/[roundId]/page.tsx
index b7c5bb8..2c0aa2b 100644
--- a/src/app/(admin)/admin/rounds/[roundId]/page.tsx
+++ b/src/app/(admin)/admin/rounds/[roundId]/page.tsx
@@ -2997,19 +2997,19 @@ function ScoreDistribution({ roundId }: { roundId: string }) {
             No evaluations submitted yet
           </p>
         ) : (
-          <div className="flex items-end gap-1 h-32">
+          <div className="flex gap-1 h-32">
             {dist.globalDistribution.map((bucket) => {
               const heightPct = (bucket.count / maxCount) * 100
               return (
-                <div key={bucket.score} className="flex-1 flex flex-col items-center gap-1">
+                <div key={bucket.score} className="flex-1 flex flex-col items-center gap-1 h-full">
                   <span className="text-[9px] text-muted-foreground">{bucket.count || ''}</span>
-                  <div className="w-full relative rounded-t" style={{ height: `${Math.max(heightPct, 2)}%` }}>
+                  <div className="w-full flex-1 relative">
                     <div className={cn(
-                      'absolute inset-0 rounded-t transition-all',
+                      'absolute inset-x-0 bottom-0 rounded-t transition-all',
                       bucket.score <= 3 ? 'bg-red-400' :
                       bucket.score <= 6 ? 'bg-amber-400' :
                       'bg-emerald-400',
-                    )} />
+                    )} style={{ height: `${Math.max(heightPct, 4)}%` }} />
                   </div>
                   <span className="text-[10px] text-muted-foreground">{bucket.score}</span>
                 </div>