Remove padding from the logo stage (use fit, not padding)

Problem

The draggable/render area is smaller than the preview. The clamp uses that smaller content box, so the logo looks trapped.

Cause: padding (5% / 15%) on the SVG stage/container.

Fix (do exactly this)

Kill padding on the stage

/* The element that directly wraps the <svg> and overlays */
[data-logo-stage] {
  position: absolute;
  inset: 0;           /* fills the preview */
  padding: 0 !important;     /* <- remove the 5% / 15% */
  box-sizing: border-box;
}

/* Preview card */
[data-logo-preview] {
  position: relative;
  height: 520px;
  overflow: hidden;   /* keeps art inside */
}

/* The svg itself */
[data-logo-stage] svg {
  display: block;
  width: 100%;
  height: 100%;
  /* no object-fit tricks; we control size via transforms */
  /* ensure: preserveAspectRatio="xMidYMid meet" on <svg> */
}


If you want breathing room, don’t use CSS padding. Do it in the fit math:

After reading #logo-root.getBBox() vs preview rect, multiply by 0.90 (10% margin) for the initial scale only.

Keep padding out of the stage so clamp uses the full preview.

Clamp must read the full preview rect

const previewRect = previewRef.current!.getBoundingClientRect(); // the element with data-logo-preview
const stageRect   = stageRef.current!.getBoundingClientRect();   // data-logo-stage (should equal previewRect)
console.log('padding check', getComputedStyle(stageRef.current!).paddingTop);
// Expect '0px'


Clamp using the transformed #logo-root.getBoundingClientRect() vs previewRect.

Do NOT subtract padding; there is none.

Acceptance

The blue clamp area (logo) can roam the entire preview.

No “micro-box” feel; edges match the visible rounded rectangle.

Initial fit still gives ~10% breathing room (via scale, not padding).

Works the same in Replit and a normal tab.

Sanity check in DevTools

getComputedStyle(document.querySelector('[data-logo-stage]')).padding
// should be "0px"
document.querySelector('[data-logo-stage]')?.getBoundingClientRect()
// should match [data-logo-preview] rect
