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"

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}
+        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>
   );
 }