jobtrackingapp/docs/redesign/phase-4/p4-06/VISUAL_REVIEW.md

# P4-06 visual review

2026-09-13, real static frontend/API fixtures at the final candidate. [RESULTS.json](RESULTS.json) records all 33 retained PNGs with case/state and hashes. These are representative frames, not pixel-diff golden baselines or exhaustive visual approval. The following images were opened and inspected at this checkpoint; no application content/CSS was hidden or changed for this review.

| Surface | Inspected evidence | Result / limit |
|---|---|---|
| Settings, four theme/locale combinations | [Light EN](visual/settings-page-layout-general-1440-light-en.png), [light NB](visual/settings-page-layout-general-1440-light-nb.png), [dark EN](visual/settings-page-layout-general-1440-dark-en.png), [dark NB](visual/settings-page-layout-general-1440-dark-nb.png) | Main headings/sections align; title/description remain compact and readable; longer NB description wraps without losing controls. Selected tabs and form boundaries remain distinguishable. Existing section cards are retained, not a new dashboard composition |
| Settings at 320px, error state | [General dark NB](visual/settings-page-layout-general-320-dark-nb.png), [notification failure dark NB](visual/settings-page-layout-notifications-error-dark-nb.png) | Header/body/section labels wrap; error retains an unchecked draft and reachable save/next action. The English error message is an intentionally injected fixture response. Manual light/NB 320px review also confirmed the main reflow, while exposing the separate admin badge issue |
| Jobs status and navigation focus | [Light](visual/semantic-foundations-jobs-nav-light.png), [dark](visual/semantic-foundations-jobs-nav-dark.png) | Distinct text-labelled statuses, row action icons and visible inverse sidebar focus. Existing compact page heading and full flat menu are unchanged; this is not the Phase 5 shell or Jobs redesign |
| Desktop density | [Comfortable light EN](visual/table-density-desktop-comfortable-light-en.png), [Compact light EN](visual/table-density-desktop-compact-light-en.png), [Compact dark NB](visual/table-density-desktop-compact-dark-nb.png) | Same data, custom status, selection and actions; 59/51px ordinary-row measurements retained in all four theme/locale cases. Long rows may grow. Text remains readable in both modes; raw English bulk statuses/browser-locale dates remain P4-05-O01. These frames follow keyboard horizontal scrolling; some edge columns are clipped at the current scroll position. They do not establish start-of-scroll alignment. Native scrolling, selection and action reachability are covered separately by the behavior fixture |
| Phone density, all theme/locale combinations | [320 Comfortable light EN](visual/table-density-phone-320-comfortable-light-en.png), [320 Compact dark NB](visual/table-density-phone-320-compact-dark-nb.png), [390 Compact light NB](visual/table-density-phone-390-compact-light-nb.png), [390 Comfortable dark EN](visual/table-density-phone-390-comfortable-dark-en.png) | Existing cards retain long role/company/status, data, listing and edit/status/delete actions. Buttons wrap rather than disappearing; checked selection and status labels supplement color. Dense still permits long text to grow. Existing rounded cards, bold role typography and tall narrow-screen content remain later Jobs design work; they are not newly approved brand styling |
| CV editor / preview | [One-page light EN](visual/builder-preview-keyboard-one-page-light-en.png), [phone preview dark NB](visual/builder-preview-keyboard-preview-390-dark-nb.png), [failed-preview dark NB](visual/builder-preview-keyboard-error-dark-nb.png) | Preview-region outline is visible, white document paper remains distinct from dark app UI; unavailable preview retains old content and retry action. Omitted editable section labels remain legible with visibility icons. Existing horizontal-overflow warning, margins, small phone print text, large document whitespace and fixed-header/scroll composition are visible limitations; no template/pagination fidelity approval |
| Shared dialogs | [Command light EN](visual/named-controls-modal-state-command-light-en-1440.png), [rename dark NB](visual/named-controls-modal-state-prompt-dark-nb-1440.png) | Focus has a distinct shape, text/description/input/count/actions are readable, background remains isolated/dimmed. Command List semantics and company-error feedback are separate open defects despite readable pictures |

## Capture and manual-review limitations

Some post-axe NB desktop captures omit sidebar glyphs or parts of labels, a capture limitation already investigated/documented in [P4-01](../p4-01/README.md). It is still visible in the current Settings/density images. Those frames support main-content review, **not complete NB desktop-navigation visual certification**. The dedicated EN navigation images and the manual expanded NB mobile drawer show the controls/names. Do not treat this as a reason to hide icons, normalize screenshots or assert a universal repaint fix; obtain stable navigation evidence for the actual shell migration.

Manual interaction used the current running localhost app in the in-app browser: sign in to its synthetic seeded admin, Settings, collapse sidebar, keyboard focus, reload, resize to 320px, open drawer, Tab and Escape. The collapse persisted and Escape returned focus, but collapsed mobile labels disappeared and the first focused row was physically occluded by the app bar. At 1440px expand again; keyboard-select Light in the real theme menu (focus returns), select Norsk, resize to 320px and inspect main headings/forms. Expanded mobile first-row focus was visible. The long `e2e-verification` admin badge overlapped header content in both inspected themes. Findings and pre-P4 source comparison are [P4-06-O01/O02](README.md#opendeferred-issue-reconciliation). The temporary viewport was reset and the tab closed.

This combines screenshot inspection, actual keyboard interaction and AX/DOM observations. It is **not** an NVDA/Narrator or physical-device test. No claim of 200%/400% browser zoom, forced colors, real touch/software keyboards, every tooltip/disabled state or every incomplete axe node. No production, personal career data or real provider account was used.