Breakpoints
Which media query an edit lands in, and how the breakpoint cascade is shown.
The breakpoint selected on the canvas decides which media query the style panel writes into. Switching to Tablet and changing a value writes into the tablet query; it does not change the base rule.
The scale
| Breakpoint | Media query |
|---|---|
| Desktop ≥1920 | (min-width: 1920px) |
| Desktop ≥1440 | (min-width: 1440px) |
| Desktop ≥1280 | (min-width: 1280px) |
| Base | none, the rule itself |
| Tablet | (max-width: 991px) |
| Mobile (L) | (max-width: 767px) |
| Mobile | (max-width: 479px) |
The canvas has three widths: Desktop, Tablet (768px) and Phone (375px). They map onto Base, Tablet and Mobile (L) respectively.
Your own queries are first class
No breakpoint is listed for its own sake. A breakpoint appears in the panel when
it carries styles, so a project that writes @media (width >= 64rem) sees that
query listed and edits it, rather than scrolling past three device widths nobody
wrote a rule for.
An edit at a breakpoint that has no query yet creates one, merging into an equivalent existing block when there is one rather than adding a second.
The cascade between breakpoints
A value set at a wider breakpoint and inherited at a narrower one is marked as inherited, not as set here. Changing it writes an override in the current query and leaves the wider rule alone, which is what you asked for, and is visible in the diff afterwards.