From db77e1f0bf49ecb90add6495889084d5ca021be9 Mon Sep 17 00:00:00 2001
From: Foohoo <foohoo@gmail.com>
Date: Sun, 17 Aug 2025 14:42:22 +0100
Subject: [PATCH] make sure the card names and sets are shown in full

---
 src/components/CardItem.tsx | 11 ++++++++++-
 src/components/SetBadge.tsx | 13 ++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx
index ea741c6..9e663a8 100644
--- a/src/components/CardItem.tsx
+++ b/src/components/CardItem.tsx
@@ -67,7 +67,16 @@ export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; ch
       </div>
       <div className="p-3 flex flex-col gap-2">
         <div className="flex items-center justify-between">
-          <h3 className="font-medium truncate" title={`${card.name} #${card.number}`}>{card.name} <span className="text-slate-500">#{card.number}</span></h3>
+          {(() => {
+            const titleText = `${card.name} #${card.number}`;
+            const len = titleText.length;
+            const size = len > 34 ? 'text-xs' : len > 24 ? 'text-sm' : 'text-base';
+            return (
+              <h3 className={`font-medium ${size} leading-tight`} title={titleText}>
+                {card.name} <span className="text-slate-500">#{card.number}</span>
+              </h3>
+            );
+          })()}
           {rarityFull ? (
             <span
               className="text-[0.7rem] rounded bg-slate-100 px-2 py-0.5 text-slate-600"
diff --git a/src/components/SetBadge.tsx b/src/components/SetBadge.tsx
index 1066d95..2552c20 100644
--- a/src/components/SetBadge.tsx
+++ b/src/components/SetBadge.tsx
@@ -14,9 +14,16 @@ export default function SetBadge({ set }: { set: TcgSet }) {
           height={16}
         />
       ) : null}
-      <span className="truncate max-w-[10rem]" title={`${set.series} — ${set.name}`}>
-        {set.series} — {set.name}
-      </span>
+      {(() => {
+        const label = `${set.series} — ${set.name}`;
+        const len = label.length;
+        const size = len > 34 ? 'text-[0.65rem]' : len > 26 ? 'text-[0.7rem]' : 'text-xs';
+        return (
+          <span className={`${size} leading-tight`} title={label}>
+            {label}
+          </span>
+        );
+      })()}
     </div>
   );
 }