From 8b07fad7f5c47ff9dc326e5ea1ce2594247d6f5f Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 11 Oct 2026 10:48:19 +0000 Subject: [PATCH 1/7] feat(cpd): Summary in two columns on desktop, Log filters shown once From 1024px the CPD Summary puts the year, To log and What's left on the left, and the dates and the year's details on the right. The Log page becomes a wide page, its side column holds every filter so the chip row over the list steps aside, the column's chips wrap instead of being cut off, and the Log button sits over the list. Phones are unchanged. The Summary's links to the year-end page now say End of year. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_01JZNXNqu4ZWvQwW613xMf1P --- src/app/work-mode.css | 26 ++++++++++++ .../cme/cme-dashboard-whats-left.tsx | 2 +- src/components/cme/cme-dashboard.tsx | 42 +++++++++++-------- src/components/cme/cme-log-page.tsx | 24 +++++++++-- 4 files changed, 71 insertions(+), 23 deletions(-) diff --git a/src/app/work-mode.css b/src/app/work-mode.css index 7859496a6e..4f9912a239 100644 --- a/src/app/work-mode.css +++ b/src/app/work-mode.css @@ -235,6 +235,11 @@ body { gap: calc(var(--spacing) * 2.25); } +/* A column with nothing in it takes no gap; a dock spans every column. */ +.work-columns > :empty { + display: none; +} + @media (min-width: 1024px) { .work-split { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); @@ -261,6 +266,27 @@ body { } } +/* The CPD log's filter column (from 1024px, desktop layout audit 11 Oct 2026): + it holds every filter, so the chip row over the list steps aside, the + column's chips wrap rather than cut off mid-word, and the Log button sits + over the list instead of across the column. */ +@media (min-width: 1024px) { + [data-filter-column] .work-chips { + flex-wrap: wrap; + row-gap: calc(var(--spacing) * 1.5); + overflow-x: visible; + mask-image: none; + } + + .work-chips[data-beside-filters] { + display: none; + } + + .work-dock[data-beside-filters] { + margin-inline-start: 18rem; + } +} + /* ------------------------------------------------------------ the band */ .work-band { diff --git a/src/components/cme/cme-dashboard-whats-left.tsx b/src/components/cme/cme-dashboard-whats-left.tsx index 7e97ea438b..942ab06bd7 100644 --- a/src/components/cme/cme-dashboard-whats-left.tsx +++ b/src/components/cme/cme-dashboard-whats-left.tsx @@ -304,7 +304,7 @@ export function CmeWhatsLeft({ end={ // A short word: held to the 48 px tap width, its words kept at the right edge. - Report + End of year } > diff --git a/src/components/cme/cme-dashboard.tsx b/src/components/cme/cme-dashboard.tsx index 68e4602ec1..a34f9936e9 100644 --- a/src/components/cme/cme-dashboard.tsx +++ b/src/components/cme/cme-dashboard.tsx @@ -29,7 +29,7 @@ import { CME_LOG_TRIGGER_ATTRIBUTE, openCmeQuickLog } from "@/components/cme/cme import { useCmeTeachingUnloggedCount } from "@/components/cme/cme-teaching-prompt"; import { CmeBandAction, CmeKvCard, cmeFreshnessEyebrow } from "@/components/cme/cme-work-kit"; import { CmeYearInWeeks } from "@/components/cme/cme-year-in-weeks"; -import { WorkBody } from "@/components/mode-kit/work"; +import { WorkColumns } from "@/components/work-frame/work-desktop-layout"; import { Button } from "@/components/ui/button"; import { NewWorkModeOnly } from "@/components/work-mode-launch/work-mode-launch-provider"; import { addDays, expandEvents } from "@/lib/calendar/calendar-event"; @@ -607,15 +607,15 @@ export function CmeDashboard({ />, ); } - // "What's left" carries the only other link to the Report; when it is hidden this row keeps the - // Report (exports, closing the year, Customise) one tap away. + // "What's left" carries the only other link to End of year; when it is hidden this row keeps + // End of year (what is missing, evidence, handing it in) one tap away. if (!showWhatsLeft) { aboutRows.push( , ); @@ -660,20 +660,26 @@ export function CmeDashboard({
{status}
- - {summary} - {nextStepNode} - {toLog} - {whatsLeft} - {chipsNode} - - - - {byCategory} - {alsoForYou} - {about} + {/* One column on a phone, in this order. From 1024px the year and what is left sit on the left, and + the dates and the year's details on the right (11 Oct 2026 layout audit). */} + +
+ {summary} + {nextStepNode} + {toLog} + {whatsLeft} + {chipsNode} +
+
+ + + + {byCategory} + {alsoForYou} + {about} +
{dock} - +
-
+ {/* From 1024px the side column holds the year, category and audit filters, so the chip row would repeat them. */} +
{yearChip}