Breakpointy

Skala breakpointów per rozdzielczość monitora (1280×800 → 5K), tiery wysokości, ultrawide 21:9 i layouty tabowane.

Jedna skala, dwa źródła#

Workspace używa jednego tieru breakpointów na popularną rozdzielczość desktopową. Skala żyje w dwóch miejscach, które testy trzymają w sync:

apps/web/src/styles/main.css — media queries layoutu,
apps/web/src/styles/breakpoints.ts — maszynowo czytelna skala (id, rozdzielczości, budżety kolumn).

breakpoints.test.ts parsuje stylesheet i wywala się, gdy tier, budżet kolumn lub kolejność rozjedzie się z manifestem.

Tiery szerokości#

Tiery to zapytania min-width, aplikowane rosnąco. Każdy tier redeklaruje wszystkie cztery kolumny, więc nie zależy od tieru poniżej.

Tier	Rozdzielczość	`min-width`	Source	Canvas min	Inspector	Export
base	< 1280×800	—	`minmax(300px, 27%)`	330 px	300 px	280 px
`wxga`	1280×800	1280 px	`minmax(300px, 27%)`	330 px	310 px	290 px
`hd`	1366×768	1366 px	`minmax(320px, 27%)`	340 px	320 px	300 px
`wxga-plus`	1440×900	1440 px	`minmax(340px, 28%)`	360 px	340 px	320 px
`hd-plus`	1600×900	1600 px	`minmax(360px, 28%)`	400 px	350 px	330 px
`wsxga-plus`	1680×1050	1680 px	`minmax(380px, 29%)`	420 px	360 px	340 px
`full-hd`	1920×1080	1920 px	`minmax(420px, 30%)`	480 px	380 px	360 px
`qxga`	2048×1152	2048 px	`minmax(450px, 30%)`	520 px	400 px	370 px
`qhd`	2560×1440	2560 px	`minmax(480px, 31%)`	600 px	420 px	380 px
`uwqhd`	3440×1440	3440 px	`minmax(520px, 30%)`	720 px	440 px	400 px
`uhd-4k`	3840×2160	3840 px	`minmax(540px, 32%)`	800 px	460 px	420 px
`uhd-5k`	5120×2880	5120 px	`minmax(600px, 32%)`	900 px	520 px	460 px

Cztery minimalne kolumny zawsze mieszczą się w szerokości swojego tieru (asercja w testach). Panele rosną monotonicznie — szerszy monitor nigdy nie dostaje mniejszego inspektora.

Ultrawide 21:9#

Monitory ultrawide dodatkowo matchują:

css

@media (min-aspect-ratio: 21/9) and (min-width: 2560px)

Tier capuje kolumnę source na 24%, daje canvasowi minimum 900 px, a shell traci max-width clamp powyżej 3840 px.

Tiery wysokości#

Zapytania max-height z bramką min-width: 901px — telefony i tablety zachowują layout tabowany. Deklarowane od najwyższego do najniższego, więc najgęstszy pasujący tier wygrywa.

Tier	Referencja	`max-height`	Header	Footer	Panel heading	Path toolbar
`short`	1600×900	900 px	60 px	27 px	50 px	42 px
`laptop`	1280×800	820 px	56 px	26 px	50 px	40 px
`hd-laptop`	1366×768	768 px	54 px	25 px	44 px	38 px
`very-short`	1366×700	700 px	50 px	24 px	42 px	34 px
`compact`	1280×600	600 px	46 px	22 px	40 px	30 px

Tier compact ukrywa też etykiety eyebrow paneli i zmniejsza status bar do 8 px.

Layouty tabowane#

Zapytanie	Zachowanie
`max-width: 1180px`	Węższe budżety kolumn, ukryte drugorzędne metadane podglądu
`max-width: 900px`	Layout tabowany, jeden panel naraz
`max-width: 600px`	Akcje headera tylko ikony, dwukolumnowa siatka formatów

Użycie skali w kodzie#

import {
  HEIGHT_TIERS,
  WIDTH_TIERS,
  minWidthQuery,
  resolveHeightTier,
  resolveWidthTier
} from '@/styles/breakpoints'

resolveWidthTier(window.innerWidth)?.id
resolveHeightTier(window.innerHeight)?.id
minWidthQuery(1920)

Dodawanie rozdzielczości#

Dodaj tier do breakpoints.ts (id, rozdzielczość, budżety kolumn).
Dodaj pasujące media query do main.css z redeklaracją wszystkich czterech kolumn.
Uruchom testy — breakpoints.test.ts wywali się, dopóki oba źródła się nie zgodzą.