fix(schedule-6): legacy-faithful polish for the Schedule 6 page

[SScholefield]

Description

Nine presentation fixes to the Schedule 6 page (Story 8.3), each bringing the modern page closer to the legacy screen. No API calls, request bodies, validation rules, or state transitions change — every fix is layout, typography, or button placement. Three files touched: frontend/src/components/schedule6/{index.tsx,index.scss,tests/Schedule6.test.tsx}.

Save / Check Status on both bars — legacy carried saveButton0 + checkStatusButton0 above the schedule and saveButton1 + checkStatusButton1 again below the General Comment (schedule6.xhtml:222-229, :518-526). The page now renders one shared actionBar() twice, matching the duplicated-bar pattern Schedules 1 and 3 already use. Add rides the top bar only — it toggles the panel directly beneath it, and legacy's bottom bar carried no add control. The Save that sat beside the General Comment textarea moved onto the lower bar, where legacy put it.

Removed the Mill / Reporting Year / Status strip — Schedule 6 was the only schedule page painting one; siblings show none, and the working context already lives in the banner.

Dropped the "Edit " label prefix — editor inputs read TSA or TFL, Volume m³, etc., identical to the Add panel and to legacy, whose rows were always directly editable under those bare names. The labelPrefix prop is gone; idPrefix still keeps every input's id/htmlFor pairing unique.

Left-alignschedules (1/3/11) where it aids column scanning; these values sit in dl grid cells with the label directly above, so it only pushed each number away from its label. Same choice as schedule2.

Gave the derived read-outs Carbon field metrics — RMG and $ / m³ sit among Carbon inputs in the add/edit grid but had no Carbon metrics, so their labels rendered bold at the wrong size and their values landed on the wrong line. They now carry label-01 labels and body-compact-01 values, with min-height: 2rem and padding-inline-start: 1rem so the value sits on the inputs' line at the inputs' text inset — the read-only-vs-input indent documented in schedule1/index.scss:100-108, schedule2:25, schedule3:58.

Fixed a label that dropped out of line — .schedule-6__fields was bottom-aligned. BR-02 always blanks one of TFL / Supply Block, and an empty dd generates no line box, so the shorter field's label was pushed down. Top alignment pins every label to the row's first line regardless of an empty value, and stops a field that grows a validation message from shifting its neighbours.

Label/value distinction without bold — labels are now told apart by size and colour (12px label-01 in --cds-text-secondary) over a 14px primary value, with Carbon's standard $spacing-03 gap where there was none. Bold is gone from every dt, including the Totals labels and the Totals: prefix.

Totals in one horizontal band — the totals

was borrowing the record-row grid, whose minmax(10rem, 1fr) tracks are sized for rows of inputs and wrapped three short numbers into a vertical stack. It now has its owand both follow the active theme. Scoped to this page's accordion.

Fixes #288

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• Updated existing tests
• New unit tests
• Manual tests (description below)

869 frontend tests / 50 files pass, ESLint and Prettier clean, npm run build compiles the SCSS. The Schedule 6 suite is 84 (52 page + 32 validation), up 2.

Two new tests: one asserting both action bars render with Add on the top one only and the correct DOM ordering around the General Comment, one clicking the bottom Save and asserting it fires exactly one identical PUT /general-comments. Existing queries became plural (getAllByRole(...)[0], the Schedules 1/3 convention) now that Save and Check Status appear twice, and the editable: false test sweeps both bars rather than one.

The CSS items are unverifiable in jsdom — no layout engine — so those were confirmed against the compiled stylesheet (label weight 400, align-items: start, the --cds-layer-hover rule) and checked visually in the running dev stack.

Checklist

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

---

Thanks for the PR!

Deployments, as required, will be available below:

• Frontend
• Backend

Please create PRs in draft mode. Mark as ready to enable:

• Analysis Workflow

After merge, new images are deployed in:

• Merge Workflow

[gpascucci]

✔️ PR Review & Verification: APPROVED

We fetched fix/sched-6-frontend-polish (PR #330) locally and performed a full peer-engineering verification of the design, SCSS, and unit tests.

---

🧪 Local Verification Loop Results

1. Frontend Production Build (npm run build): Compiles cleanly with Vite with zero errors.
2. Schedule 6 Unit Tests (npx vitest run schedule6): All 84 tests (52 page + 32 validation) are 100% green.

---

🔍 Key Verification & Architectural Highlights

• Excellent Visual Polish & Legacy Alignment (Story 8.3):

  • Dual Action Bars: Duplicating the shared actionBar() twice (above the records and below the General Comment) perfectly matches the layout of Schedules 1 and 3, resolving the split action-bar paradigm from legacy saveButton0/1.
  • Asymmetric Add Action: Limiting the Add trigger to the top bar only is highly intuitive, since the add-panel toggles directly beneath it and doesn't belong at the bottom of the page.
  • Consistent Context Gating: Removing the duplicate "Mill / Reporting Year / Status" strip aligns Schedule 6 with its sister pages, cleaning up layout noise since the global banner already authoritative tracks working context.
  • Top-Aligned Grid (align-items: start): Shifting from flex-end to start for .schedule-6__fields cleanly prevents label misalignment when conditional values (like TFL or Supply Block) are empty.

• Refined Typography & Spacing:

  • Contrast without Bold: Moving from heavy bold tags on every dt label to a cleaner 12px label-01 secondary-text color over 14px primary-text value is a beautiful UX refinement. It aligns perfectly with IBM Carbon standards.
  • Derived Field Metrics: Remapping the server-derived RMG and Cost-per-Volume outputs with real Carbon metrics (label-01, body-compact-01, and a min-height of 2rem) aligns their baseline and insets perfectly with surrounding inputs.
  • Left-Aligned dl Numbers: Selecting left-alignment for numeric values within description list cells makes perfect visual scanning sense, stopping numbers from floating far away from their top-aligned labels.

---

🚨 PR Validation Check Fixed

We noticed that the PR Validate / Checks check was failing with a Conventional Commits syntax error:

No release type found in pull request title " fix(schedule-6): ..."

This was caused by an accidental leading space at the very start of the PR title. We used the GitHub CLI to update the PR title to:
fix(schedule-6): legacy-faithful polish for the Schedule 6 page

GitHub Actions has automatically picked up this change and triggered a fresh validation run which is now passing perfectly.

---

🏁 Final Verdict

The changes in this PR represent high-integrity, meticulous CSS and React engineering. Visual hierarchy is vastly improved, redundant components are pruned, and the test suite has been elegantly expanded with high-coverage plural queries.

Highly recommended for immediate merge! 🚀

[Rylan-cgi]

Pull Request Review: PR #330 (bcgov/nr-ilcr)

---

✅ Review Verdict: APPROVED

This is an exceptionally clean, well-reasoned, and legacy-faithful PR. It bridges the visual gap between the modern React-based Schedule 6 implementation and the legacy screen layouts without introducing any functional regressions or API-level churn.

Key Strengths & Polish Points:

1. DRY Duplicated Action Bars:

   • Decomposing the action bars into a reusable actionBar(includeAdd: boolean) helper is a great choice. It prevents code duplication while precisely mirroring legacy's saveButton0/saveButton1 (top/bottom) split.
   • Gating Add on the top bar only makes complete sense conceptually and holds parity with legacy.

2. UI Alignment & Layout Polish:

   • Mismatched Label Alignment Fixed: Shifting .schedule-6__fields from align-items: flex-end (bottom-aligned) to align-items: start (top-aligned) is a subtle but critical fix. Because BR-02 always blanks either TFL or Supply Block, bottom-alignment pushed the empty fields' labels out of line. Top-alignment guarantees every label sits on the same baseline under any input combination.
   • Horizontally Compact Totals: Shifting the Totals region from the wide record-row grid to its own flex container is a great usability improvement. It keeps totals in a neat horizontal band instead of wrapping short values into vertical stacks.
   • Left-aligned dl values: Swapping the dl cells to text-align: left aligns them visually with their labels above, improving scanability.

3. Strong Verification (Tests Updated & Extended):

   • The new assertions added to Schedule6.test.tsx (like Save and Check Status render on both bars and the bottom bar's Save fires the same General Comment PUT as the top one) are extremely thorough.
   • Modifying all existing query selectors from Edit Volume m³ to Volume m³ perfectly validates the removal of the redundant label prefixes.

[paulushcgcj]

The Schedule 6 presentation changes match the stated legacy-faithful polish scope. The focused tests, lint, formatting, diff checks, and GitHub checks are clean, and I found no blocking or actionable issues. The added layout assertions are particularly useful because they cover both action-bar behavior and placement around General Comments.