MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix score distribution chart bars not rendering in admin round page

Browse Source 
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>
This commit is contained in:
Matt
2026-02-21 19:58:13 +01:00
parent 5a609457c2
commit 351d8144d9
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(admin)/admin/rounds/[roundId]/page.tsx
View File

@@ -2997,19 +2997,19 @@ function ScoreDistribution({ roundId }: { roundId: string }) {
No evaluations submitted yet No evaluations submitted yet
</p> </p>
) : ( ) : (
<div className="flex items-end gap-1 h-32"> <div className="flex gap-1 h-32">
{dist.globalDistribution.map((bucket) => { {dist.globalDistribution.map((bucket) => {
const heightPct = (bucket.count / maxCount) * 100 const heightPct = (bucket.count / maxCount) * 100
return ( 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> <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( <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 <= 3 ? 'bg-red-400' :
bucket.score <= 6 ? 'bg-amber-400' : bucket.score <= 6 ? 'bg-amber-400' :
'bg-emerald-400', 'bg-emerald-400',
)} /> )} style={{ height: `${Math.max(heightPct, 4)}%` }} />
</div> </div>
<span className="text-[10px] text-muted-foreground">{bucket.score}</span> <span className="text-[10px] text-muted-foreground">{bucket.score}</span>
</div> </div>