1.8 KiB
Harbor responsive layout
The client page has three stable regions: the Harbor brand, the primary power control and the subscription/details form.
Desktop
At widths above 920 px the main panel uses a symmetric three-column grid. Equal outer columns keep the power control on the exact horizontal center axis; the details form occupies the right column. The form has a viewport-relative maximum height and its own vertical scroll for unusually long content, so a large server list cannot move the power control away from the visual center.
The no-subscription setup state collapses the panel to one column and centers the form. No left offset or translated absolute element participates in either layout.
Tablet and mobile
At 920 px and below all main regions use one normal-flow grid column. The brand becomes an absolute header inside the page shell, while reserved top padding prevents it from overlapping the primary content. Errors become normal-flow rows instead of floating over nearby controls. Form width is capped by both the available space and a readable maximum.
At 560 px and below spacing and drawer padding become more compact. Controls with a preferred fixed size, such as the duration switch, use min(..., 100%) so the primary flow remains available at 320 px.
Motion and overflow contract
Layout properties are not animated. State feedback may animate opacity and blur, and the existing prefers-reduced-motion rules disable those transitions and animations. Drawers are capped at 100vw; dialogs and inline content retain viewport-relative width limits.
Automated source-contract tests protect the symmetric desktop grid, normal-flow narrow layout, viewport-safe control widths and reduced-motion fallback. Release acceptance still includes a rendered check at 390, 768 and 1440 px; TASK-017 will later make that browser matrix automatic in CI.