The page builder lets editors check how a page renders at any screen size — including monitors larger than the editor itself can show. Two sets of toolbar buttons cover the full range: breakpoint buttons that resize the preview iframe to common device widths, and simulate buttons that render the iframe at a logical width larger than the available space and scale it down to fit.
The problem
The page builder reserves space on either side of the preview iframe for the row sidebar and toolbar — typically leaving 1100–1400px of horizontal space on a 1920px monitor. That's enough room to preview phone, tablet, and most desktop layouts, but it's not enough to trigger Tailwind's 2xl: breakpoint (1536px) or anything beyond, and there's no way to see how a layout renders on a true 1920px or 2560px monitor without leaving the editor.
The fix
The toolbar offers two complementary modes:
-
Breakpoint buttons — resize the preview iframe down to a smaller width (390px, 768px, 1280px, etc.). The iframe reports the smaller width to its internal CSS, so
sm:,md:,lg:rules trigger as they would on a real device of that size. Useful for verifying mobile and tablet layouts. -
Simulate buttons (1920, 2560) — render the iframe at the chosen logical width and CSS-scale it down to fit the available preview area. The iframe reports the larger width to its media queries (so
2xl:and any custom breakpoints fire), but visually shrinks to fit the editor. Useful for verifying that designs hold up on large external monitors.
Only one mode is active at a time — clicking a breakpoint button clears any active simulate mode, and vice versa. Clicking the active button toggles back to the default desktop view.
How it works
The breakpoint buttons set a max-width on the preview container. The simulate buttons take a different approach: the preview wrapper is sized to a fixed pixel width (1920px or 2560px) and a CSS transform: scale(N) is applied with transform-origin: top left, where N is computed from the container's available width.
scale = container.clientWidth / simulatedWidth
A ResizeObserver watches the container so the scale factor updates automatically when the editor's window or sidebar widths change. The wrapper's height is set to 100 / scale % so the scaled visual height fills the available vertical space.
Because the iframe's actual CSS width remains 1920px (or 2560px), all media queries inside the iframe — including any custom Tailwind breakpoints beyond 2xl — evaluate exactly as they would on a real monitor of that size.
What lives where
| Path | Purpose |
|---|---|
resources/views/pages/dashboard/pages/⚡editor.blade.php |
Toolbar buttons, Alpine state (previewWidth, simulatedWidth, simulatedScale), setWidth() / setSimulated() methods, and the ResizeObserver setup. The preview container's max-width and the wrapper's transform are bound to that state. |
Notes
- The breakpoint mode toggle button (between the standard and extended breakpoint sets) controls which row of breakpoint buttons is visible. The simulate buttons are always visible, regardless of which breakpoint set is showing.