make sure the card names and sets are shown in full

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"