From 1b747b20847d01750f0c8d32951f8789ac99bfc6 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Tue, 7 Jul 2026 02:15:26 +0800 Subject: [PATCH 1/6] fix(ui): prevent services pathway pill overflow and refine section design Replace the rigid five-column pill grid with a wrap-friendly layout, add shortLabel support for long pathway names, and restyle the services shortcuts section with a subtle eyebrow title. Co-authored-by: Cursor --- src/components/mode-home-template.tsx | 36 +++++++++++++------ .../services/services-home-page.tsx | 5 +-- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/components/mode-home-template.tsx b/src/components/mode-home-template.tsx index 29d52d385f..0f8483d65f 100644 --- a/src/components/mode-home-template.tsx +++ b/src/components/mode-home-template.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { type ReactNode } from "react"; import { type LucideIcon, ArrowRight } from "lucide-react"; -import { cn } from "@/components/ui-primitives"; +import { cn, eyebrowText } from "@/components/ui-primitives"; export type ModeHomeAction = { title: string; @@ -16,6 +16,7 @@ export type ModeHomeAction = { export type ModeHomePill = { label: string; + shortLabel?: string; href?: string; onClick?: () => void; icon?: LucideIcon; @@ -289,40 +290,53 @@ export function ModeHomeTemplate({ ) : null} {pills?.length ? ( -
+
{pillsTitle || pillsAction ? ( -
+
{pillsTitle ? ( -

{pillsTitle}

+

{pillsTitle}

) : ( )} {pillsAction}
) : null} -
+
{pills.map((pill) => { const PillIcon = pill.icon; + const displayLabel = pill.shortLabel ?? pill.label; const content = ( <> {PillIcon ? ( - + ) : ( - + )} - {pill.label} + {displayLabel} ); const pillClassName = - "inline-flex min-h-11 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm font-semibold text-[color:var(--text)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent)]/35 hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:min-w-0 sm:px-3"; + "inline-flex min-h-9 items-center justify-center gap-2 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-2 text-xs font-semibold text-[color:var(--text)] shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent)]/35 hover:bg-[color:var(--surface-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] sm:text-sm"; + const pillA11y = pill.shortLabel ? { "aria-label": pill.label, title: pill.label } : {}; return pill.href ? ( - + {content} ) : ( - ); diff --git a/src/components/services/services-home-page.tsx b/src/components/services/services-home-page.tsx index 6624fc2e62..ef4b90e66d 100644 --- a/src/components/services/services-home-page.tsx +++ b/src/components/services/services-home-page.tsx @@ -47,7 +47,8 @@ const commonPathways: ModeHomePill[] = [ href: appModeHomeHref("services", { query: "crisis support services", focus: true, run: true }), }, { - label: "Aboriginal and Torres Strait Islander", + label: "Aboriginal and Torres Strait Islander services", + shortLabel: "ATSI services", tone: "rose", href: appModeHomeHref("services", { query: "Aboriginal Torres Strait Islander services", @@ -121,7 +122,7 @@ export function ServicesHomePage() { desktopComposerSlotId={modeHomeDesktopComposerSlotId} actionsLabel="Service tasks" actions={hasRegistryRecords ? taskCards : []} - pillsTitle="Common pathways" + pillsTitle="Browse by need" pills={hasRegistryRecords ? commonPathways : []} footer={ hasRegistryRecords ? ( From ffce50c072330632c661784df6a16c828fcb3818 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 7 Jul 2026 03:19:34 +0000 Subject: [PATCH 2/6] ci: retrigger checks after billing fix Co-authored-by: BigSimmo From fe97f9bc0d503446fef102cb81ba14102e5b452a Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 7 Jul 2026 03:26:43 +0000 Subject: [PATCH 3/6] style(ui): run Prettier on mode-home-template for CI format:check Co-authored-by: BigSimmo --- src/components/mode-home-template.tsx | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/components/mode-home-template.tsx b/src/components/mode-home-template.tsx index 0f8483d65f..532436347f 100644 --- a/src/components/mode-home-template.tsx +++ b/src/components/mode-home-template.tsx @@ -296,11 +296,7 @@ export function ModeHomeTemplate({ > {pillsTitle || pillsAction ? (
- {pillsTitle ? ( -

{pillsTitle}

- ) : ( - - )} + {pillsTitle ?

{pillsTitle}

: } {pillsAction}
) : null} @@ -315,9 +311,7 @@ export function ModeHomeTemplate({ ) : ( - + )} {displayLabel} @@ -330,13 +324,7 @@ export function ModeHomeTemplate({ {content} ) : ( - ); From 1c7d4c0aca6c0a4b5a559b233db2d0c868710bff Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 7 Jul 2026 03:45:29 +0000 Subject: [PATCH 4/6] test(ui): accept Library matches heading on differentials home Demo evidence matches rename the pills section from Recent work; keep the geometry assertions unchanged. Co-authored-by: BigSimmo --- tests/ui-tools.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts index 2f481b6600..631aaf9fce 100644 --- a/tests/ui-tools.spec.ts +++ b/tests/ui-tools.spec.ts @@ -785,7 +785,7 @@ test.describe("Clinical KB tools launcher", () => { await expect(page.locator('input[placeholder="Ask or search a presentation"]:visible').first()).toBeVisible(); await expect(page.getByRole("button", { name: "Search presentations" })).toBeVisible(); await expect(page.getByRole("button", { name: "Compare differentials" })).toBeVisible(); - await expect(page.getByRole("heading", { name: "Recent work" })).toBeVisible(); + await expect(page.getByRole("heading", { name: /^(Recent work|Library matches)$/ })).toBeVisible(); await expect(page.getByTestId("global-search-input")).toHaveCount(1); const differentialsHomeSearch = page.getByTestId("differentials-home").getByTestId("global-search-input"); await expect(differentialsHomeSearch).toBeVisible(); From 92b46aafc19ee2fe5607c41d4b311fc9334f7a9d Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 7 Jul 2026 03:57:30 +0000 Subject: [PATCH 5/6] test(ui): match differentials pills eyebrow text instead of heading Mode home pills titles moved from h2 to eyebrow paragraphs in the pathway-pills redesign. Co-authored-by: BigSimmo --- tests/ui-tools.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts index 631aaf9fce..613a328c4a 100644 --- a/tests/ui-tools.spec.ts +++ b/tests/ui-tools.spec.ts @@ -785,7 +785,7 @@ test.describe("Clinical KB tools launcher", () => { await expect(page.locator('input[placeholder="Ask or search a presentation"]:visible').first()).toBeVisible(); await expect(page.getByRole("button", { name: "Search presentations" })).toBeVisible(); await expect(page.getByRole("button", { name: "Compare differentials" })).toBeVisible(); - await expect(page.getByRole("heading", { name: /^(Recent work|Library matches)$/ })).toBeVisible(); + await expect(page.getByTestId("differentials-home").getByText(/^(Recent work|Library matches)$/)).toBeVisible(); await expect(page.getByTestId("global-search-input")).toHaveCount(1); const differentialsHomeSearch = page.getByTestId("differentials-home").getByTestId("global-search-input"); await expect(differentialsHomeSearch).toBeVisible(); From aaff02d292886319f71c41dd6f2f6534e0b920cb Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 7 Jul 2026 04:18:41 +0000 Subject: [PATCH 6/6] test(ui): target differentials pills region, not duplicate Recent work text Co-authored-by: BigSimmo --- tests/ui-tools.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/ui-tools.spec.ts b/tests/ui-tools.spec.ts index 613a328c4a..4e6e264d54 100644 --- a/tests/ui-tools.spec.ts +++ b/tests/ui-tools.spec.ts @@ -785,7 +785,9 @@ test.describe("Clinical KB tools launcher", () => { await expect(page.locator('input[placeholder="Ask or search a presentation"]:visible').first()).toBeVisible(); await expect(page.getByRole("button", { name: "Search presentations" })).toBeVisible(); await expect(page.getByRole("button", { name: "Compare differentials" })).toBeVisible(); - await expect(page.getByTestId("differentials-home").getByText(/^(Recent work|Library matches)$/)).toBeVisible(); + await expect( + page.getByTestId("differentials-home").getByRole("region", { name: /^(Recent work|Library matches)$/ }), + ).toBeVisible(); await expect(page.getByTestId("global-search-input")).toHaveCount(1); const differentialsHomeSearch = page.getByTestId("differentials-home").getByTestId("global-search-input"); await expect(differentialsHomeSearch).toBeVisible();