From 42ed0d275bb5f80d0fb967e3b542eafb45395ff3 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 28 Jun 2026 19:36:35 -0700
Subject: [PATCH] fix: Update category breakdown layout to grid to prevent text
 truncation

---
 src/components/quizzes/CategoryBreakdown.tsx | 23 ++++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/quizzes/CategoryBreakdown.tsx b/src/components/quizzes/CategoryBreakdown.tsx
index 412b18d..6f16b22 100644
--- a/src/components/quizzes/CategoryBreakdown.tsx
+++ b/src/components/quizzes/CategoryBreakdown.tsx
@@ -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>