feat: add DebugName wrappers to 56 components + redesign attunement cards + remove ScrollArea from AttunementsTab

src/components/game/tabs/CraftingTab/MaterialRecipeCard.tsx

@@ -7,6 +7,7 @@ import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
 import { canCraftRecipe } from '@/lib/game/data/fabricator-recipes';
 import { MANA_TYPE_LABELS } from '@/lib/game/data/fabricator-recipe-types';
 import type { FabricatorRecipe } from '@/lib/game/data/fabricator-recipes';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 interface MaterialRecipeCardProps {
   recipe: FabricatorRecipe;
@@ -31,6 +32,7 @@ export function MaterialRecipeCard({
   const resultRarity = resultDrop ? LOOT_RARITY_COLORS[resultDrop.rarity] : null;
 
   return (
+    <DebugName name="MaterialRecipeCard">
     <div
       className="p-3 rounded border bg-gray-800/50"
       style={{ borderColor: resultRarity?.color ?? '#6B7280' }}
@@ -98,5 +100,6 @@ export function MaterialRecipeCard({
         {canCraft ? 'Craft' : 'Missing Resources'}
       </Button>
     </div>
+    </DebugName>
   );
 }