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"; "use client";
import { Fragment } from "react";
import { scoreQuestion } from "@/lib/scoring"; import { scoreQuestion } from "@/lib/scoring";
interface CategoryBreakdownProps { interface CategoryBreakdownProps {
@ -32,7 +33,7 @@ export function CategoryBreakdown({ quiz, attempt, answeredIds, answers }: Categ
const categories = Object.keys(stats).sort(); const categories = Object.keys(stats).sort();
return ( 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) => { {categories.map((cat) => {
const { earned, possible } = stats[cat]; const { earned, possible } = stats[cat];
const pct = possible > 0 ? (earned / possible) * 100 : 0; 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"; else if (pct >= 80) colorClass = "bg-success";
return ( return (
<div key={cat} className="flex items-center gap-4"> <Fragment key={cat}>
<div className="w-32 text-sm font-medium text-text-heading capitalize truncate" title={cat}> <div className="text-sm font-medium text-text-heading capitalize break-words" title={cat}>
{cat} {cat}
</div> </div>
<div className="flex-1"> <div className="w-full bg-bg-surface-alt rounded-full h-2.5">
<div className="w-full bg-bg-surface-alt rounded-full h-2.5"> <div
<div className={`h-2.5 rounded-full ${colorClass} transition-all duration-500`}
className={`h-2.5 rounded-full ${colorClass} transition-all duration-500`} style={{ width: `${pct}%` }}
style={{ width: `${pct}%` }} />
/>
</div>
</div> </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} {earned.toFixed(1)} / {possible}
</div> </div>
</div> </Fragment>
); );
})} })}
</div> </div>