cesnimda
5.5 KiB
Responsive strategy and density
ARC-13; all PRES contracts, particularly PRES-E07, PRES-E08, PRES-J05, PRES-J07, PRES-W01, PRES-C06–PRES-C10, PRES-M04, PRES-S03, PRES-A01. This is an interaction contract, not screenshots or completed visual validation.
Breakpoints and content
Retain current MUI breakpoints (0, 768, 1024, 1266, 1440) as starting tokens. The existing CV two-pane boundary at 900 has a content reason; do not force it to match global navigation without testing. Mobile shell currently changes below 768. Document these two responsibilities rather than changing every media query at once.
Required viewport samples: 320 CSS px reflow, 390×844 phone, 430 px large phone, 768×1024 portrait tablet, 1024×768 landscape, 1280×800 laptop, 1440×900 desktop, 1920 wide. Also test just below/above 768 and 900. EN/Bokmål, light/dark, long names, missing data, many jobs/custom statuses and multipage CVs matter more than device labels.
Task-specific behavior
| Surface | Narrow / touch | Wider layouts | Preservation condition |
|---|---|---|---|
| Navigation | Existing modal menu drawer; grouped sections, visible search/bell/account | Collapsible sidebar/rail | Same destinations and active owner; focus return; no duplicate bottom nav by default |
| Jobs | Structured cards, essential role/company/status/date/action; filter sheet | Primary table, optional board | Same filters/records/actions; selection never opens row; no functionality removed by density |
| Board | Scrollable grouped columns with explicit status menu and keyboard alternative | Same grouping/drag semantics | No mandatory drag or hidden custom/Other status |
| Dashboard | Single-column user order; move/hide; no meaningless horizontal resize | Discrete spans and supported resize | Keep saved desktop sizes when phone ignores them |
| Job workspace | Header wraps; labelled section selector if tabs overflow; actions easy to reach | Full page, readable tabs and section content | Preserve current section, dirty draft and return context through resize |
| CV editor | Edit/Preview toggle; touch/keyboard reorder controls | Editor + scrollable paginated preview | No remount/data loss at 900 boundary; preview keyboard scroll works after transition |
| Dialogs/drawers | Long forms full-height with reachable Save/Cancel above virtual keyboard | Bounded modal or side panel | One modal focus trap; no fixed-height clipping of errors |
| Commands | Full-width dialog, labelled search and grouped list; keyboard doesn't cover selected result | Bounded dialog | Same command scope, owner clearing and activation behavior |
| Filters | Draft filter sheet with Apply/Cancel; existing committed filters retained on cancel | Inline common filters, advanced disclosure | Show active filter count, never change result data before intended apply |
| Charts | Short summary + accessible values table, limited visible labels | Chart with legend and comparison | Same period/denominator; no hover-only values |
| Correspondence | Message/draft panes as stepwise views with clear Back | List/detail when usable | Unsaved/draft/revision/send attempt unchanged; full content readable |
| Settings | Labelled section select/list and single-column fields | Secondary section navigation | Save failure retains draft, account/security/provider separation |
| Admin | Label/value rows or labelled horizontal table region, actions explicit | Table and aggregate panels | No omitted permission/last-admin warnings, no leaked private analytics |
| Offers | One comparison at a time with accessible labelled alternatives | Recorded offers side-by-side | Same currency/period/source, no invented normalized comparison |
A read-only job preview may become full height on phone or be omitted in favor of the full page, subject to validation. Existing full job functionality remains. Stacked tabs or tiny icon-only controls are not acceptable substitutes for navigation.
Comfortable and Compact
NEW-14. Comfortable is default. Density changes row/field spacing and secondary metadata layout, never feature visibility, source semantics or font legibility. Propose table body vertical padding 12 px / 8 px, with sufficient control hit area. Compact on touch must retain at least the same target hit regions as Comfortable; it is not permission to shrink every icon.
Apply to Jobs/company/admin tables and suitable lists first. Do not compress CV document layout, long-form editor text, dialogs or charts globally. Keep a distinct application preference with the existing identity/preference model; scope and migration must be explicit. Old page-size/column preferences and owner-keyed saved filters continue to work.
State, scrolling and validation
Resizing a viewport changes presentation, not component/resource identity. Keep draft text, selected object, filter state, review proposal and save operation. Never keep private state after B02 invalidates the session. Preserve document and page scroll independently; return focus to a meaningful element that is visible in the new mode.
Avoid global overflow hiding as a “fix.” Data tables/boards/doc previews may have labelled intentional internal scroll; the page at 320 CSS px must not require sideways scrolling to reach ordinary actions. Sticky headers/footers and software keyboards must not obscure focused input/error messages.
Each migrated surface needs populated/empty/loading/error/locked/dirty checks and manual keyboard, touch, 200%/400% zoom and screen reader evidence. Browser viewport emulation is useful but does not prove touch usability, virtual keyboard behavior or assistive technology compatibility.