Inconsistent behavior when setting custom viewport height

[FedericoBonel]

Description

When setting a custom viewport width and height, the preview behaves inconsistently: the width stays within the preview's boundaries, while the height grows beyond them, making the preview scrollable. This inconsistency can cause issues for users trying to use viewports for aspect ratio-based designs.

Steps to Reproduce

1. Set a custom viewport width and height matching your monitor resolution (e.g., 1920 × 1080).
2. Open the editor and observe the preview.
3. Use the preview controls to zoom out.

What Happens

• The viewport width remains constrained within the preview boundaries.
• The viewport height exceeds the preview boundaries, causing scrolling.
• When zooming out, the height and width remain unchanged, leading to an inaccurate representation of the viewport size.

Expected Behavior

The preview should maintain consistency in how it scales. There are two possible solutions:
A. The width should also expand to match the actual size, making both dimensions scrollable.
B. The aspect ratio should be preserved, scaling the height accordingly to accurately reflect the target resolution.

Option A is likely clearer since explicit width and height values are set. However, adding an option to enforce aspect ratios via the CSS aspect-ratio property could also be beneficial for users needing more flexibility.

Video demonstrating the issue (height exceeding width boundaries)::

Vite.+.React.mp4