From f4eaf6a9821d0351d5079fb512137172a930b878 Mon Sep 17 00:00:00 2001
From: insome <ActiveInAI@gmail.com>
Date: Thu, 18 Jun 2026 11:49:41 +0800
Subject: [PATCH] fix(item-catalog): reserve tile min-height to prevent
 first-open layout flash

On first open of the item catalog, grid tiles briefly collapse before
their thumbnails load (the auto-fill columns have no resolved width yet),
so labels stack into a cramped two-row text layout that reflows once
images arrive. Reserving a min-height on the square thumbnail wrapper
keeps each tile's footprint stable from the first paint, eliminating the
flash. No visual change once images are loaded.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../editor/src/components/ui/item-catalog/item-catalog.tsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/ui/item-catalog/item-catalog.tsx b/packages/editor/src/components/ui/item-catalog/item-catalog.tsx
index a2d215d58..b4e27b913 100644
--- a/packages/editor/src/components/ui/item-catalog/item-catalog.tsx
+++ b/packages/editor/src/components/ui/item-catalog/item-catalog.tsx
@@ -96,7 +96,8 @@ export function ItemCatalog({
             onMouseEnter={() => triggerSFX('sfx:menu-hover')}
             type="button"
           >
-            <div className="relative aspect-square w-full overflow-hidden rounded-lg">
+            {/* min-h 兜底:首开网格列宽未定时仍占住高度,避免瓦片塌缩成文字行(防闪) */}
+            <div className="relative aspect-square min-h-[90px] w-full overflow-hidden rounded-lg">
               <img
                 alt={item.name}
                 className="h-full w-full object-cover"