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

src/components/game/GameToast.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useToast } from '@/hooks/use-toast';
+import { DebugName } from '@/components/game/debug/debug-context';
 import {
   Toast,
   ToastClose,
@@ -61,8 +62,9 @@ export function GameToaster() {
   const { toasts } = useToast();
 
   return (
-    <ToastProvider>
-      {toasts.map((toast) => {
+    <DebugName name="GameToast">
+      <ToastProvider>
+        {toasts.map((toast) => {
         // Determine toast type from className or default to info
         const toastType: ToastType = 
           toast.variant === 'destructive' ? 'error' :
@@ -103,16 +105,17 @@ export function GameToaster() {
         - Desktop: bottom-right
         - Mobile: bottom-center, full-width
       */}
-      <ToastViewport
-        className={cn(
-          'fixed z-[100] flex max-h-screen w-full flex-col-reverse p-4',
-          // Desktop: bottom-right, fixed width
-          'sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[420px]',
-          // Mobile: bottom-center, full-width
-          'max-sm:bottom-0 max-sm:left-0 max-sm:flex-col max-sm:items-center'
-        )}
-      />
-    </ToastProvider>
+        <ToastViewport
+          className={cn(
+            'fixed z-[100] flex max-h-screen w-full flex-col-reverse p-4',
+            // Desktop: bottom-right, fixed width
+            'sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[420px]',
+            // Mobile: bottom-center, full-width
+            'max-sm:bottom-0 max-sm:left-0 max-sm:flex-col max-sm:items-center'
+          )}
+        />
+      </ToastProvider>
+    </DebugName>
   );
 }