From 34d9e833dbda386dfe1a966549b321f545d61276 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 21 Mar 2026 13:18:17 +0000
Subject: [PATCH] Fix sprite display to show front-facing frame instead of full
 sheet

The NPC sprite images are horizontal strips with multiple frames. Previously
the entire sheet was squeezed into the container, showing all frames at once.
Now the image height fills the container with auto width, and overflow:hidden
clips to just the first (front-facing) frame.

https://claude.ai/code/session_01LgEDXY2DGWvLdHvhmM5Xqy
---
 editor/app.js    | 2 +-
 editor/style.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/app.js b/editor/app.js
index bd4359df5c..99271dbdcb 100644
--- a/editor/app.js
+++ b/editor/app.js
@@ -2140,7 +2140,7 @@ function getSpriteHtml(graphicsId, size = 32) {
     const url = getSpriteUrl(graphicsId);
     const name = (graphicsId || '').replace('OBJ_EVENT_GFX_', '').replace(/_/g, ' ');
     return `<div class="sprite-container" style="width:${size}px;height:${size}px">
-        <img src="${url}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" style="width:${size}px;height:${size}px;image-rendering:pixelated" alt="${escAttr(name)}">
+        <img src="${url}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" style="height:${size}px;width:auto;image-rendering:pixelated" alt="${escAttr(name)}">
         <div class="sprite-fallback" style="display:none;width:${size}px;height:${size}px">${escHtml(name.substring(0, 2).toUpperCase())}</div>
     </div>`;
 }
diff --git a/editor/style.css b/editor/style.css
index 5b9e35178b..a3f4fc7f6d 100644
--- a/editor/style.css
+++ b/editor/style.css
@@ -1200,7 +1200,7 @@ tbody tr:last-child td { border-bottom: none; }
     background: var(--bg);
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 }
 .sprite-fallback {
     align-items: center;