Files
jobtrackingapp/docs/redesign/phase-8/p8-02

P8-02 — Ordering and supported sizes

The existing useDragReorder provides desktop handle drag and an explicit drop-target border. The dedicated handle prevents ordinary widget actions from starting a drag. Named Earlier/Later buttons are the keyboard and touch alternative. Stable React keys, DOM order, a live position announcement and focus retention cover moving the focused control to the first/last position. No new drag library or dependency was added.

All nine IDs use one canonical order, including hidden widgets. Hiding preserves size and position. Summary cards support full width only; the other eight report sections support standard/full. The existing report nodes and accessible values tables render inside a two-column CSS grid at md and larger. Full width spans both columns. Below md, every widget uses one readable full-width column; saved widths remain unchanged. No dense packing, CSS visual-only order, fixed heights or arbitrary pixels.

Catalogue normalisation preserves known order, ignores unknown/duplicate IDs, falls back from unsupported sizes and appends absent entries hidden for saved revisions. The server separately rejects invalid writes, rather than trusting the frontend. The catalogue names all defaults/data owners.

Integrated 36/36 focused frontend tests and corrected 10/10 real browser cases include order/size/visibility readback, native handle drag, keyboard focus/status, emulated touch button movement and zero page overflow at320/390/768/1440px in both themes/languages. Source evidence: .artifacts/phase8/dashboard-final.json, browser-corrected.json. The shared editor source is committed with P8-01 as documented there. Later fixed-header focus repair and full-regression results belong to final acceptance.

Physical touchscreen, software keyboard, human screen reader, complete true browser zoom, other-browser and production render qualification remain unperformed. Emulation does not close these requirements.