fix: improve match3d tray preview readability

src/components/match3d-runtime/Match3DRuntimeShell.tsx

@@ -6,7 +6,14 @@ import {
   Sparkles,
   XCircle,
 } from 'lucide-react';
-import { type PointerEvent, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type PointerEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import type {
   Match3DClickItemRequest,
@@ -54,6 +61,26 @@ type Match3DFeedbackEvent = {
   itemIds: string[];
 };
 
+function resolveTrayPreviewItem(
+  run: Match3DRunSnapshot,
+  slot: Match3DTraySlot,
+) {
+  if (!slot.itemInstanceId) {
+    return null;
+  }
+  const item = run.items.find(
+    (entry) => entry.itemInstanceId === slot.itemInstanceId,
+  );
+  if (!item) {
+    return null;
+  }
+  return {
+    ...item,
+    itemTypeId: slot.itemTypeId ?? item.itemTypeId,
+    visualKey: slot.visualKey ?? item.visualKey,
+  };
+}
+
 const MATCH3D_ENABLE_3D_GEOMETRY_EXPERIMENT = true;
 
 function formatTimer(value: number) {
@@ -333,17 +360,14 @@ export function Match3DRuntimeShell({
   }, [run]);
 
   const shouldUse3DRender = !force2DRender;
+  const handleTrayPreviewFallback = useCallback(() => {
+    setForce2DRender(true);
+  }, []);
   const trayPreviewItems = useMemo(() => {
     if (!run) {
       return [];
     }
-    return run.traySlots.map((slot) =>
-      slot.itemInstanceId
-        ? (run.items.find(
-            (item) => item.itemInstanceId === slot.itemInstanceId,
-          ) ?? null)
-        : null,
-    );
+    return run.traySlots.map((slot) => resolveTrayPreviewItem(run, slot));
   }, [run]);
 
   const handleItemClick = async (item: Match3DItemSnapshot) => {
@@ -505,13 +529,17 @@ export function Match3DRuntimeShell({
             data-testid="match3d-tray"
           >
             {shouldUse3DRender ? (
-              <Match3DTrayPreviewBoard slotItems={trayPreviewItems} />
+              <Match3DTrayPreviewBoard
+                onFallback={handleTrayPreviewFallback}
+                referenceItems={run.items}
+                slotItems={trayPreviewItems}
+              />
             ) : null}
             {run.traySlots.map((slot) => {
               return (
                 <div
                   key={slot.slotIndex}
-                  className="relative z-0 aspect-square min-w-0 rounded-xl bg-white/10 p-1"
+                  className="relative z-0 h-14 min-w-0 rounded-xl bg-white/10 p-1 sm:h-16"
                   data-testid="match3d-tray-slot"
                 >
                   <Match3DTrayToken