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

src/components/game/crafting/EnchantmentDesigner/EffectSelector.tsx

@@ -8,6 +8,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { AlertCircle, Wand2, Plus, Minus } from 'lucide-react';
 import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
 import type { EffectSelectorProps } from './types';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 export function EffectSelector({
   selectedEquipmentType,
@@ -22,6 +23,7 @@ export function EffectSelector({
   getIncompatibilityReason,
 }: EffectSelectorProps) {
   return (
+    <DebugName name="EffectSelector">
     <>
       {enchantingLevel < 1 ? (
         <div className="text-center text-[var(--text-muted)] py-8">
@@ -84,7 +86,7 @@ export function EffectSelector({
                         )}
                         <ActionButton
                           size="sm"
-                            variant="ghost"
+                          variant="ghost"
                           className="h-6 w-6 p-0"
                           onClick={() => addEffect(effect.id)}
                           disabled={!selected && selectedEffects.length >= 5}
@@ -143,6 +145,7 @@ export function EffectSelector({
         </>
       )}
     </>
+    </DebugName>
   );
 }