Viewport Modes

Vesper Mosaic offers three view modes: Fit, 100%, and Stack. Each mode lays out the same three viewports - Mobile 390, Desktop 1920, Tablet 768 - in a different way to suit a different part of the QA workflow.

Fit mode

Default. Keyboard: Cmd+1.

In Fit mode, all three panes are visible at once and scaled to share the window's available width. The layout uses a 3-column CSS grid weighted by content width, so the Desktop pane (1920) gets the most horizontal space, Tablet (768) gets a middle share, and Mobile (390) gets the smallest column.

Each pane renders the page at its true native viewport width using Chromium's CSS viewport sizing. Mosaic then applies a CSS transform scale to fit the rendered content into the on-screen pane. Layout math, breakpoints, and media queries all evaluate against the real viewport width - the scaling only affects display size.

This is the mode you want for spotting layout regressions across breakpoints at a glance: hamburger menu broken at 390, hero stacking wrong at 768, sidebar too narrow at 1920 - all visible in one window.

100% mode

Keyboard: Cmd+2.

In 100% mode, each pane renders at its native pixel width with no scaling. The total content width is 390 + 768 + 1920 + gaps = roughly 3,100 pixels, which almost always exceeds the available screen. Mosaic adds a horizontal scrollbar at the bottom of the window so you can pan across the three panes.

Use 100% when the rendered scale matters - text legibility checks, touch-target sizing, pixel-precise screenshots. The trade-off is you can only see one or two panes at a time without scrolling horizontally.

Stack mode

Keyboard: Cmd+3.

In Stack mode, the three panes are arranged vertically at full native width. The Mobile pane is on top, then Desktop, then Tablet (matching the left-to-right order from Fit mode). The window scrolls vertically to move between viewports.

Stack is useful when you want a single viewport visible at a time but don't want to switch apps or open three browser windows. It also pairs well with screen recording - capturing one full-width viewport at a time keeps the resulting recording readable.

How scaling works in Fit

The detail that trips people up: in Fit mode, the page is not rendered at the on-screen pixel size. The page is rendered at the real viewport width (390, 768, 1920) and then visually shrunk to fit the pane. This means:

Media queries fire correctly. A @media (max-width: 600px) rule applies to the 390 pane and not the 768 pane, regardless of the on-screen size of either pane.
Hover states work. Cursor coordinates are mapped through the scale transform. Hovering over a button in the scaled-down pane triggers :hover at the right element.
Click coordinates work. Same as hover - the click is dispatched at the unscaled coordinates.
Text gets visually smaller in scaled-down panes. A 16px body font in the 1920 pane will look smaller on screen than the same 16px in the 390 pane, because the 1920 pane is more aggressively scaled to fit.

For pixel-perfect screenshots or text-rendering checks, switch to 100% mode where there is no scaling.

Switching modes mid-session

Switching modes preserves the current URL and the navigation history of each pane. It also preserves scroll position via the same anchor-element sync mechanism used between panes. Switch freely without losing your place.