External embed: reuse designObjectFitWrap to scale-fit cleanly

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.
This commit is contained in:
thePR0M3TH3AN committed 2026-06-01 09:28:58 -04:00
1 parent a2a6de2211
commit db2f6151a9
1 file changed
+7 -6
+7 -6
View File
@@ -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 });