[Bug] [Stake-Engine Portal] Game iframe actual dimensions are 16px smaller than viewport sizes declared in Local Testing dropdown

[RaRdq]

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

1. Go to Local Testing on stake-engine.com
2. Select the "Popout S (400×225)" viewport from the dropdown
3. Open DevTools → Inspect the <iframe> element
4. Observe: the iframe reports 384 × 209, not 400 × 225
5. 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:

1. 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)
2. 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)