From db2f6151a9cbf70ea9596e78b56f60afab003ac4 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 1 Jun 2026 09:28:58 -0400
Subject: [PATCH] External embed: reuse designObjectFitWrap to scale-fit
 cleanly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The grid swap fixed the squish but introduced the inverse: the
renderer's 720px box stayed at 720px without scaling down to the
iframe viewport. fitMiniPreview was firing, but something in the
grid layout path was preventing the transform: scale() from
shrinking the visible artwork.

Reverted the wrap to the same pattern the existing linked-design
renderer uses for in-app layer previews — flex centering + the
.designObjectFitWrap CSS class, which sets

  .designObjectFitWrap > * { flex: 0 0 auto; max-width: none;
    max-height: none; transform-origin: center center;
    margin: 0 !important; }

flex: 0 0 auto on the direct child explicitly disables both
flex-grow and flex-shrink, so the renderer's fixed 720×720 box
stays at its natural size in layout. fitMiniPreview then reads
naturalW=720, wrapW=iframe-width, and scales uniformly with
correct aspect.

This is the exact pattern that works for linked-design layers in
the editor; the embed inherits the same correctness guarantees.
---
 src/index.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/index.html b/src/index.html
index 5e42c37..cb5c962 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21372,12 +21372,13 @@
       if (!stage || !footer) return;
       stage.innerHTML = '';
       const wrap = document.createElement('div');
-      // display:grid avoids flex-shrink crushing the renderer's
-      // fixed-pixel box to wrap width (which makes fitMiniPreview's
-      // uniform-scale calc squish the image non-uniformly). The box
-      // stays at its natural PREVIEW_BASE_PX dimensions; fitMiniPreview
-      // scales around transform-origin: center center.
-      wrap.style.cssText = 'position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden';
+      // Reuse the .designObjectFitWrap class — its `> * { flex: 0 0
+      // auto }` rule keeps the renderer's fixed-720px box from
+      // being flex-shrunk to wrap width (the source of the earlier
+      // horizontal-squish bug). fitMiniPreview then scales around
+      // transform-origin: center center, which the class also sets.
+      wrap.className = 'designObjectFitWrap';
+      wrap.style.cssText = 'position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center';
       stage.appendChild(wrap);
       try {
         renderDesignPayloadPreview(wrap, payload, { compact: true, transparentPixelArt: true });