#3465 CPD on desktop: Summary in two columns, Log filters shown once

User description

Summary

Before: on a desktop, CPD Summary was a single column using less than half the screen. Log showed every filter twice (a side column plus a chip row over the list), the side column's chips were cut off mid-word, and the floating Log button covered the filter column.

After: from 1024px wide, Summary puts the year card, To log and What's left on the left, and Also for you and About this year on the right. Log becomes a wide page. Its side column holds every filter, so the chip row steps aside, the column's chips wrap, and the Log button sits over the list. Phones and upright tablets are unchanged. Summary's links to the year-end page now say "End of year", matching its tab.

How: Summary uses the desktop frame's WorkColumns (PR #3464). Log uses WorkWidePage on its Activities view. Three small unlayered rules in work-mode.css handle the chip row, the column chips and the dock offset at 1024px and up. Both changes come from the 11 Oct usefulness and layout audit (CPD items "Log page on desktop shows every filter twice" and "Summary on desktop in two columns").

Areas touched: Personal practice, App experience

Verification

• Checks run:
  • CPD unit and DOM tests, plus admin-wording and route-reachability: Tests 1197 passed (1197)
  • Design-system and overlay CSS contract tests: Tests 131 passed (131)
  • Internal typecheck clean; eslint clean on the changed files; prettier check passes
  • Container Chromium screenshots of /cme and /cme/log at 1440 px and 390 px (example data). Browser suites are left to CI.

Risk and rollout

• Risk: layout only, from 1024px. There are no data, clinical or auth changes.
• Rollback: revert this PR.
• Provider or production effects: None.

Notes

• The Summary dock sits under the left column on desktop, so the Log button is not stretched across the screen.

🤖 Generated with Claude Code

https://claude.ai/code/session_01JZNXNqu4ZWvQwW613xMf1P

Generated by Claude Code

Summary by cubic

Makes the CPD desktop layout use the wide screen from 1024px: the Summary sits in two columns, and the Log shows each filter once instead of twice.

• Summary puts the year, To log, and What's left on the left; Also for you and About this year on the right. The grid collapses back to one column when the right side is empty.
• Log becomes a wide page; its side column holds every filter, the chip row over the list is hidden, chips wrap instead of being cut off, and the Log button sits over the list.
• Summary links to the year-end page now say "End of year" instead of "Report".
• Splits the side-counts reader into its own file to break the import loop between the clinical sidebar and the two-pane menu.
• Updates the UI tests for the regrouped mode menu: Medication opens via its pinned shortcut, the tablet rail lists Psychiatry instead of Tools, Tools leaves the mode menu, and the active-tool route checks narrow to the collapsed sidebar.
• Phones and upright tablets are unchanged.

CodeAnt-AI Description

Arrange the CPD summary and log for desktop screens

What Changed

• From 1024px, the CPD summary places the year and outstanding items on the left, with dates and year details on the right.
• The desktop Log page shows filters in a sidebar instead of repeating them above the list. Sidebar filters wrap, and the action button sits over the list.
• Year-review links now say “End of year”. Phone layouts are unchanged.

Impact

✅ Two-column CPD summary on desktop
✅ One set of log filters on desktop
✅ Readable filter labels and unobstructed log actions

@codeant-ai ask: Your question here

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

@codeant-ai: Your feedback here

@codeant-ai: Do not flag unused imports.

@codeant-ai: review