From b57ea864103486d5462f70ecad4b09146d88f3a7 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Sat, 11 Jul 2026 22:40:06 +0800 Subject: [PATCH 1/4] fix(differentials): shape the detail tab focus ring and firm up action taps Rebuilt on top of #483's redesigned interactive detail page (which already fixed the wrapping action labels and tab-label wrap). Remaining polish: - Add a .focus-ring-tab class (inset rounded ring: outline-offset -4px, no halo) so keyboard focus no longer draws a full-height box that collides with the tablist border; inactive tabs get a transparent bottom border to remove the 2px layout jump on tab switch. - Keep #483's roving-tabindex keyboard nav, nowrap and flex-1 layout intact. - shrink-0 on the desktop action cluster so the Save icon button stops being crushed below 44px at ~1024px; nowrap on the Compare button. - Bump the two overlap-diagnosis chips to the 44px tap standard. - Regression test: detail Save action >=44px at 1024px, Overview tab single-line with no page overflow at 320px. Co-Authored-By: Claude Fable 5 --- src/app/globals.css | 11 +++++ .../differential-detail-page.tsx | 14 +++--- tests/ui-tools.spec.ts | 44 +++++++++++++++++++ 3 files changed, 62 insertions(+), 7 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 9c06a4ddb..9a4cb8040 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1799,6 +1799,17 @@ summary::-webkit-details-marker { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent) !important; } + /* Underline-tab focus: an inset rounded ring that hugs the label instead of the + default full-height box, which collides with the tablist border. */ + .focus-ring-tab { + border-radius: var(--radius-md); + } + .focus-ring-tab:focus-visible { + outline: 2px solid var(--focus) !important; + outline-offset: -4px !important; + box-shadow: none !important; + } + /* Premium hover transitions for source capsules */ .source-capsule-hover { transition: diff --git a/src/components/differentials/differential-detail-page.tsx b/src/components/differentials/differential-detail-page.tsx index cd595a6f4..f22bb6210 100644 --- a/src/components/differentials/differential-detail-page.tsx +++ b/src/components/differentials/differential-detail-page.tsx @@ -160,13 +160,13 @@ function SectionItems({ {slug ? ( {item} ) : ( - + {item} )} @@ -714,11 +714,11 @@ function TopActions({ onCompare: () => void; }) { return ( -
+
From 619dd99845beb02aa93f30377011b89d70fcb814 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Sat, 11 Jul 2026 23:37:11 +0800 Subject: [PATCH 3/4] fix(medication): use per-prompt action descriptions on the prescribing home MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The MedicationHome actions hardcoded description: "Prescribing-focused search." for every prompt, ignoring the authored `medicationPrompts[].description` values ("Check renal dosing…", "Review opioid-use…", "Check maximum dose…") that the prescribing-home responsive test asserts. Restore `description: prompt.description` so each card shows its specific guidance and the advisory UI regression passes. Co-Authored-By: Claude Fable 5 --- .../clinical-dashboard/medication-prescribing-workspace.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx index 58213e866..c02e3cee1 100644 --- a/src/components/clinical-dashboard/medication-prescribing-workspace.tsx +++ b/src/components/clinical-dashboard/medication-prescribing-workspace.tsx @@ -207,7 +207,7 @@ function MedicationHome({ actionsLabel="Medication prompts" actions={medicationPrompts.map((prompt) => ({ title: prompt.label, - description: "Prescribing-focused search.", + description: prompt.description, icon: prompt.icon, onClick: () => onSuggestedSearch(prompt.label), disabled: loading, From be5ebd1a272020029dd841ffd95750543f158e81 Mon Sep 17 00:00:00 2001 From: "coderabbitai[bot]" <136622811+coderabbitai[bot]@users.noreply.github.com> Date: Sun, 12 Jul 2026 00:23:44 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=93=9D=20Add=20docstrings=20to=20`cla?= =?UTF-8?q?ude/site-formatting-polish-b91374`=20(#503)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DocumentTagCloud.tsx | 9 ++++++++ src/components/applications-launcher-page.tsx | 6 +++++ .../favourites-command-library-page.tsx | 5 +++++ .../favourites-library-nav.tsx | 6 +++++ .../differential-detail-page.tsx | 22 +++++++++++++++++++ .../services/service-detail-page.tsx | 6 +++++ 6 files changed, 54 insertions(+) diff --git a/src/components/DocumentTagCloud.tsx b/src/components/DocumentTagCloud.tsx index b3ce99a1e..49bac53dd 100644 --- a/src/components/DocumentTagCloud.tsx +++ b/src/components/DocumentTagCloud.tsx @@ -53,6 +53,15 @@ function confidenceTitle(tag: SmartDocumentTag) { return `${tag.group}: ${tag.source} tag, ${Math.round(tag.confidence * 100)}% confidence`; } +/** + * Renders a document tag with group-specific styling and optional search interaction. + * + * @param tag - The document tag to display. + * @param compact - Whether to use compact sizing. + * @param selected - Whether to indicate the tag as selected. + * @param onTagClick - Optional callback invoked when the tag is clicked. + * @returns The rendered document tag chip. + */ function DocumentTagChip({ tag, compact, diff --git a/src/components/applications-launcher-page.tsx b/src/components/applications-launcher-page.tsx index 3af9807e4..446c2a73b 100644 --- a/src/components/applications-launcher-page.tsx +++ b/src/components/applications-launcher-page.tsx @@ -321,6 +321,12 @@ function QuickActions({ onSelect, mobile }: { onSelect: (id: string) => void; mo ); } +/** + * Renders responsive tabs for selecting a tool category. + * + * @param activeFilter - The currently selected tool category. + * @param onFilterChange - Called with the selected category when a tab is activated. + */ function FilterTabs({ activeFilter, onFilterChange, diff --git a/src/components/clinical-dashboard/favourites-command-library-page.tsx b/src/components/clinical-dashboard/favourites-command-library-page.tsx index 0cfb03fbe..054bd4e82 100644 --- a/src/components/clinical-dashboard/favourites-command-library-page.tsx +++ b/src/components/clinical-dashboard/favourites-command-library-page.tsx @@ -362,6 +362,11 @@ function ContinueStrip({ item, onSelect }: { item: FavouriteItem; onSelect: (id: ); } +/** + * Renders a menu of actions for a favourite item. + * + * @param item - The favourite item associated with the available actions + */ function RowActionsMenu({ item }: { item: FavouriteItem }) { const [open, setOpen] = useState(false); const buttonRef = useRef(null); diff --git a/src/components/clinical-dashboard/favourites-library-nav.tsx b/src/components/clinical-dashboard/favourites-library-nav.tsx index c6ec59429..8d2e0f732 100644 --- a/src/components/clinical-dashboard/favourites-library-nav.tsx +++ b/src/components/clinical-dashboard/favourites-library-nav.tsx @@ -224,6 +224,12 @@ function SidebarRow({ entry }: { entry: SidebarEntry }) { ); } +/** + * Renders the favourites library navigation sidebar in expanded or compact mode. + * + * @param collapsed - Whether to display the compact sidebar layout. + * @param onCollapsedChange - Called when the user requests a different sidebar layout. + */ export function FavouritesSidebar({ collapsed, onCollapsedChange, diff --git a/src/components/differentials/differential-detail-page.tsx b/src/components/differentials/differential-detail-page.tsx index f22bb6210..d6526c33a 100644 --- a/src/components/differentials/differential-detail-page.tsx +++ b/src/components/differentials/differential-detail-page.tsx @@ -126,6 +126,14 @@ const sectionItemIconClass: Partial> test: "text-[color:var(--info)]", }; +/** + * Renders section items according to the section tone. + * + * @param section - The section whose tone determines the item layout and styling + * @param items - The items to display + * @param overlapLinks - Maps overlap item labels to diagnosis slugs for linked items + * @returns The rendered section item list + */ function SectionItems({ section, items, @@ -702,6 +710,14 @@ function FooterStatus({ ); } +/** + * Renders desktop actions for comparing, copying, and saving a diagnosis. + * + * @param record - The diagnosis record whose content is copied. + * @param saved - Whether the diagnosis is currently saved. + * @param onToggleSaved - Called when the saved state is toggled. + * @param onCompare - Called when comparison is requested. + */ function TopActions({ record, saved, @@ -833,6 +849,12 @@ const detailTabs: Array<{ id: DifferentialDetailTabId; label: string }> = [ { id: "source", label: "Source" }, ]; +/** + * Renders keyboard-navigable tabs for the diagnosis detail sections. + * + * @param active - The currently selected tab. + * @param onChange - Called when the selected tab changes. + */ function Tabs({ active, onChange, diff --git a/src/components/services/service-detail-page.tsx b/src/components/services/service-detail-page.tsx index 1ef3fadbe..98fe8c746 100644 --- a/src/components/services/service-detail-page.tsx +++ b/src/components/services/service-detail-page.tsx @@ -264,6 +264,12 @@ function SummaryCard({ card }: { card: ServiceSummaryCard }) { ); } +/** + * Displays referral information rows with their values and copy actions. + * + * @param rows - The referral information rows to display + * @param onCopy - Callback invoked with a row value and feedback label when copying is requested + */ function ReferralTable({ rows, onCopy,