Review at any breakpoint — and blur what should stay private

Most “it’s broken” reports are width-specific: the thing only overlaps at 1280, only wraps on a phone, only overflows on a tablet in landscape. Reviewing at one width finds one class of bug.

Switch viewports

The widget toolbar carries three presets — Desktop view, Tablet view, Mobile view — and the keyboard cycles them without leaving the page. The Preview size picker next to them holds the exact dimensions, plus your viewport presets.

Two things worth knowing:

• Presets are saved locally and used by drag resize, so the widths your team actually cares about stay one click away.
• The picker lists your project’s max breakpoints, tagged max, default or preset, so a preview width matches a real CSS breakpoint rather than an arbitrary number.

A pin dropped while a viewport is active records that viewport, so the report says at 390 px instead of on my phone.

Scope a fix to one width

If you are fixing rather than only flagging, the change carries its own Width scope — all widths, or the one you are looking at. Set the mobile spacing without touching desktop, or a dark-theme colour without touching light. See edit the live page with visual branches for the full scope model.

Annotate a screenshot

Sometimes the fastest explanation is a drawing on top of a capture. The annotator has four tools:

• Arrow — point at the thing
• Box — frame the region
• Draw — freehand, for everything the first two cannot say
• Blur out — hide anything that should not travel

Undo steps back through the marks before you attach the capture to a pin.

Blur before you share

The blur tool exists for a specific reason: reviews of real screens contain real data. Customer names, email addresses, invoice numbers, order IDs, a support inbox in the background — all of it ends up in the screenshot attached to a bug report, and from there in a channel that people outside the project can read.

Make it a rule rather than an afterthought:

1. Capture the state.
2. Blur every personal or commercial detail that is not the bug.
3. Then attach it.

If a capture is already too revealing to clean up, pin the element instead — a pin carries the selector and the environment without carrying the contents of the screen.

Next

• Catch what breaks at a given width: audit accessibility and layout.
• Non-web surfaces work the same way: review PDFs, images and video.