Skip to content

Archived Brief

This brief has been completed and is retained as a build record.

B-DETAIL-06 — Layout Restructure: Zone 1 Expansion · Line-in-Sand · Responsive

SURFACE: rtopacks.com.au — qual detail page (/qual/[code]/)
CLOUDFLARE ACCOUNT: e5a9830215a8d88961dc6c80a8c7442a (UCCA — do not touch UCCO)
DO NOT TOUCH: All other surfaces, workers, D1 tables, unit drawer (B-DETAIL-05), tab cycle toggle
TEST QUAL: rtopacks.com.au/qual/PSP50922

The concept

One clear design principle drives this brief: draw a line in the sand halfway down the screen. Above = identity. Below = instrument.

Everything above the line is about the qualification: who it is, what it delivers, what units it contains.
Everything below the line is the HUD instrument panel: gauges, Recon signal, Opinionator.

The V-notch separator already marks this boundary. This brief makes the above-the-line zone earn its space properly, and makes the below-the-line zone feel like it owns the bottom half of the screen with authority.

Current state (measured live)

Viewport: 1389×746px

Zone y start height ends at
Z1 (header) 16 179px 195
Z2 (description) 203 120px 323
V-notch gap 323 ~48px 371
Z3 (instrument) 371 315px 686

Z1 internal layout: - Left column .z1l: flex: 1, w=1005px — contains code badge, H1 title, metadata row, stat chips - Right column .z1r: flex: 0 0 auto, w=320px — contains "Qualification units" label + unit accordion

Z2 (description): Full-width block, 120px tall (clipped). .z2e has max-width: 820px; margin: 0 auto — centred correctly but the z2e.scrollHeight = 337px meaning there's ~217px of text hidden behind overflow. The "WHAT THIS QUALIFICATION DELIVERS" label + Plain English / Training package toggles sit in .z2h.

Z3 internal layout: - .tb tab bar: h=30px, flex: 0 0 auto - .tc tab content: h=285px, flex: 1 1 0, display: flex; flex-direction: column - .gg gauges grid: h=104px, display: grid, flex: 0 1 auto - .op Opinionator + Recon signal: h=105px, flex: 0 1 auto — sits at y=537 - .at attribution: h=13px — sits at y=650 - Dead space below .at to bottom of z3: ~36px

Problems this brief solves: 1. Z2 description is a wide horizontal strip cutting the page in two — it doesn't belong there in that form 2. Z1 left column has ~100px of unused vertical space below the stat chips (it's only 80px of content in a 179px box) 3. The Recon signal bar (op at y=537) is buried in the lower third — the primary signal of the entire HUD is the least visible element 4. On mobile, the units accordion falls between the header and description creating a disjointed stack

Fix 1 — Absorb Zone 2 into Zone 1

The description text moves up into Zone 1, sitting in the left column below the stat chips.

Zone 2 (.z2) is eliminated as a separate horizontal band. The "WHAT THIS QUALIFICATION DELIVERS" label and Plain English / Training package toggles move into Z1L below the stat chips. The description text (.z2e) follows beneath them, constrained within the left column width.

New Z1 left column structure (top to bottom): 

[code badge]          ← .cb
[Qualification title] ← .qt  h1
[metadata row]        ← .zm  (AQF level · status · training package)
[stat chips]          ← .sc  (5 core · 12 elective · 0 RTOs)
[─────────────────]   ← thin teal rule, 1px, opacity 0.3
[WHAT THIS QUAL DELIVERS label + toggles]  ← .z2h content, moved here
[description text]    ← .z2e content, moved here, max-height ~120px, overflow-y auto, internal scroll

Z1 right column stays as-is: "Qualification units" label + unit accordion at top-right. No changes.

Z1 height: Let it grow to fit the content — remove any fixed height. flex: 0 0 auto stays (don't let it push Z3 out). Give it a min-height of 200px and let content define the rest up to max-height: 55vh.

Z2 (.z2) becomes empty / zero-height: The element can stay in the DOM for now but should have height: 0; overflow: hidden; padding: 0. Or remove it and relocate .z2h and .z2e into .z1l via JSX restructure. JSX restructure is cleaner — Alex's call on implementation approach.

V-notch gap: Tighten to ~20px padding. Currently the gap between Z2-end and Z3-start is 48px — with Z2 gone, the V-notch becomes the direct boundary between Z1 and Z3. This is the line in the sand. Make it feel intentional — slightly thicker label, maybe RECON ↓ to signal "instrument below."

Fix 2 — Recon signal elevation

The Recon signal bar needs to be the hero of Zone 3, not the footnote.

Currently the layout order in .tc (Overview tab) is: 1. Gauges grid (.gg) — 104px 2. Opinionator with signal bar embedded (.op) — 105px
3. Attribution (.at) — 13px

The Recon signal bar is inside .op at the bottom of the stack. It's the most important single output of the HUD and it's the last thing you see.

New layout order in .tc for Overview tab: 1. Gauges grid (.gg) — unchanged, h≈100px 2. Recon signal bar — extracted from .op, promoted to its own row, full width, taller 3. Opinionator weighting controls (Graduate outcomes / Market size / Profitability pills) — below the bar 4. Signal label ("Moderate signal" + descriptor text) 5. Attribution

Recon bar visual treatment: - Height: increase the bar track from ~8px to ~14px — it should read as a primary instrument element, not a form input - Width: full .tc width (1317px on desktop), not constrained
- Add a small label above-left: RECON SIGNAL in 9px teal mono (already exists as .es — just reposition) - The gradient (red→orange→yellow→green) stays — it's good - The dot position marker stays - "Moderate signal" label sits directly below the bar, left-aligned, same teal as now

Fix 3 — Responsive layout (mobile-first breakpoints)

Write these breakpoints in the same CSS module as the desktop changes. Two breakpoints:

@media (max-width: 767px) — Mobile

Zone 1 mobile: 

[code badge] [AQF badge] [status dot]    ← single line, flex row
[Qualification title]                     ← h1, font-size: 1.4rem
[stat chips]                              ← 5 core · 12 elective (compact)
[description — 3 lines max, collapsed]   ← max-height: 4.5em, overflow hidden
[▾ Read more] toggle                      ← expands description inline on tap
[▾ Core (5)] [▾ Elective (12)]           ← unit accordions, full width

Units accordion moves BELOW the description on mobile (not a separate right column — there is no right column on mobile). The right column .z1r collapses to width: 100%; display: block on mobile.

Zone 3 mobile:

Tab bar: overflow-x: auto; white-space: nowrap — tabs scroll horizontally. Do not wrap or shrink the tab labels. A subtle right-fade gradient indicates more tabs to the right.

Gauges: Change from 4-column grid to 2×2 grid on mobile. Each gauge cell gets min-width: 0. Keep gauge size but reduce to ~70px diameter arc.

Recon bar: Full width, same as desktop treatment. This works perfectly at mobile width.

Opinionator pills: Stack vertically OR make them flex-wrap: wrap so they reflow to 2-per-row.

Search pill / Journey circles / Waypoint: Already sitting at bottom — keep as-is on mobile, they work.

@media (min-width: 768px) and (max-width: 1023px) — Tablet

Z1 stays two-column but narrow the right column: .z1r gets flex: 0 0 260px (down from 320px).
Description text in Z1L gets max-height: 100px (slightly less room than desktop).
Zone 3 gauges: 4-column grid stays, but reduce arc size to ~80px diameter.
Tab bar: all 5 tabs visible, font-size reduce to 11px if needed.

Fix 4 — Units panel — no reverse panels

You said: "I didn't want reverse panels underneath the units on the side."

Currently .z1r contains the units list and nothing else. There should be no element below the units accordion in .z1r — if any element has crept in below the Elective accordion, remove it. .z1r ends when the units end. The vertical space below the last unit row in .z1r is just transparent — the video world shows through.

Confirm: .z1r has no bottom padding element, no decorative box, no placeholder div below the unit list rows.

Implementation notes

JSX restructure approach: The cleanest implementation moves .z2h and .z2e content into .z1l in the JSX, then removes (or zeroes out) the .z2 wrapper. This is preferable to CSS-only repositioning which would require position: absolute and create z-index complexity.

Z2 tombstone: If Alex removes .z2 from JSX, also remove the .z2, .z2h, .z2e CSS rules. Don't leave dead CSS.

Description "read more" on mobile: A simple useState(expanded) toggle. When collapsed: max-height: 4.5em; overflow: hidden. When expanded: max-height: none. Transition: max-height 0.3s ease. The toggle label: ▾ More / ▴ Less, 10px teal mono.

Recon bar extraction: The bar is currently inside the Opinionator component. Extract the <input type="range"> (.lr) and its label elements out of .op and into a new .rs (recon signal) wrapper div inside .tc, positioned between .gg and .op.

Deploy checklist

  • Description text absorbed into Z1L — renders below stat chips, internally scrollable, centred text gone (it's constrained to left column width now)
  • Z2 band eliminated — no horizontal strip between header and instrument
  • V-notch is the hard line — Z1 flows directly to V-notch to Z3
  • Recon signal bar is above Opinionator pills in Z3, prominent
  • Mobile 390px: single column, description collapses to 3 lines with "read more", units below description, tabs scroll horizontally, gauges 2×2
  • Tablet 768px: two-column Z1 with narrowed right column, all else proportional
  • No reverse panels or extra elements below unit list in Z1R
  • Test at: 390px (iPhone), 768px (iPad), 1389px (desktop)

What this does NOT change

  • Tab cycle toggle (B-DETAIL-05) — untouched
  • Unit drawer (B-DETAIL-05) — untouched
  • Gauge animations, wobble, stagger — untouched
  • Waypoint button, journey circles, clock — untouched
  • Luminosity slider — untouched
  • All cookie logic — untouched
  • Search pill — untouched