Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: Update category breakdown layout to grid to prevent text truncation
All checks were successful
Automated Container Build / build-and-push (push) Successful in 52s
Details

Browse source
This commit is contained in:
Elijah 2026-06-28 19:36:35 -07:00
parent 7d3831149c
commit 42ed0d275b
1 changed files with 11 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/quizzes/CategoryBreakdown.tsx
View file

@ -1,5 +1,6 @@
"use client";
import { Fragment } from "react";
import { scoreQuestion } from "@/lib/scoring";
interface CategoryBreakdownProps {
@ -32,7 +33,7 @@ export function CategoryBreakdown({ quiz, attempt, answeredIds, answers }: Categ
const categories = Object.keys(stats).sort();
return (
<div className="space-y-4">
<div className="grid grid-cols-[minmax(100px,1fr)_2fr_auto] gap-x-4 gap-y-4 items-center">
{categories.map((cat) => {
const { earned, possible } = stats[cat];
const pct = possible > 0 ? (earned / possible) * 100 : 0;
@ -42,24 +43,22 @@ export function CategoryBreakdown({ quiz, attempt, answeredIds, answers }: Categ
else if (pct >= 80) colorClass = "bg-success";
return (
<div key={cat} className="flex items-center gap-4">
<div className="w-32 text-sm font-medium text-text-heading capitalize truncate" title={cat}>
<Fragment key={cat}>
<div className="text-sm font-medium text-text-heading capitalize break-words" title={cat}>
{cat}
</div>
<div className="flex-1">
<div className="w-full bg-bg-surface-alt rounded-full h-2.5">
<div
className={`h-2.5 rounded-full ${colorClass} transition-all duration-500`}
style={{ width: `${pct}%` }}
/>
</div>
<div className="w-full bg-bg-surface-alt rounded-full h-2.5">
<div
className={`h-2.5 rounded-full ${colorClass} transition-all duration-500`}
style={{ width: `${pct}%` }}
/>
</div>
<div className="w-24 text-right text-sm text-text-secondary">
<div className="text-right text-sm text-text-secondary whitespace-nowrap min-w-[3rem]">
{earned.toFixed(1)} / {possible}
</div>
</div>
</Fragment>
);
})}
</div>