Description
The Local Testing panel declares specific viewport sizes for popout/mobile viewports (e.g., "Popout S: 400×225"), but the actual <iframe> rendered dimensions are 16px smaller in both width and height due to the parent wrapper's padding: 8px (p-2 Tailwind class).
Root Cause
The viewport wrapper div.m-auto.p-2.bg-muted.rounded-lg is sized to the declared dimensions (e.g., 400×225), but its p-2 (padding: 8px) eats into the available content area. The <iframe> inside it renders at 100% × 100% of the content box, resulting in every viewport loses exactly 16px on each axis.
Impact
- CSS Media Queries Break: Game developers write
@media (max-width: 600px) and (max-height: 500px) targeting the declared 400×225 viewport, but the actual 384×209 iframe means these queries activate differently than expected.
- Pixel-Perfect Layouts Impossible: Figma designs targeting 400×225 are off by 16px (~7% height loss at 225px), causing clipping and overflow on the most constrained viewports.
- Silent Regression: Developers don't realize their game runs at 384×209 until they inspect the DOM, leading to hours of layout debugging.
Steps to Reproduce
- Go to Local Testing on
stake-engine.com
- Select the "Popout S (400×225)" viewport from the dropdown
- Open DevTools → Inspect the
<iframe> element
- Observe: the iframe reports
384 × 209, not 400 × 225
- Inspect the parent
div.m-auto.p-2.bg-muted.rounded-lg → confirms padding: 8px
Expected Behavior
The <iframe> element should render at exactly the declared viewport dimensions (400×225, 800×450, etc.). The padding should be applied outside the declared dimensions, not inside.
Suggested Fix
Either:
- Add
box-sizing: border-box + increase the wrapper size by 16px to compensate for padding (e.g., wrapper becomes 416×241 so the iframe content area is 400×225)
- Remove the
p-2 padding from the wrapper and apply the rounded-corner visual treatment via the iframe's border or an outer non-sized container
Environment
- Platform: stake-engine.com Local Testing
- Browser: Chrome 134 (Windows 11)
- Affected viewports: ALL dropdown sizes (the 16px delta is universal)
Description
The Local Testing panel declares specific viewport sizes for popout/mobile viewports (e.g., "Popout S: 400×225"), but the actual
<iframe>rendered dimensions are 16px smaller in both width and height due to the parent wrapper'spadding: 8px(p-2Tailwind class).Root Cause
The viewport wrapper
div.m-auto.p-2.bg-muted.rounded-lgis sized to the declared dimensions (e.g., 400×225), but itsp-2(padding: 8px) eats into the available content area. The<iframe>inside it renders at100% × 100%of the content box, resulting in every viewport loses exactly 16px on each axis.Impact
@media (max-width: 600px) and (max-height: 500px)targeting the declared 400×225 viewport, but the actual 384×209 iframe means these queries activate differently than expected.Steps to Reproduce
stake-engine.com<iframe>element384 × 209, not400 × 225div.m-auto.p-2.bg-muted.rounded-lg→ confirmspadding: 8pxExpected Behavior
The
<iframe>element should render at exactly the declared viewport dimensions (400×225, 800×450, etc.). The padding should be applied outside the declared dimensions, not inside.Suggested Fix
Either:
box-sizing: border-box+ increase the wrapper size by 16px to compensate for padding (e.g., wrapper becomes 416×241 so the iframe content area is 400×225)p-2padding from the wrapper and apply the rounded-corner visual treatment via the iframe's border or an outer non-sized containerEnvironment