From a7c326852ddd9302478016786f78a60a1ccb4be1 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/3] 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 031708539..ba00a459d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1793,6 +1793,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 aa58dd1f8ba40eff536ee61b13769ebb2418befc Mon Sep 17 00:00:00 2001 From: "coderabbitai[bot]" <136622811+coderabbitai[bot]@users.noreply.github.com> Date: Sat, 11 Jul 2026 14:52:36 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=93=9D=20Add=20docstrings=20to=20`cla?= =?UTF-8?q?ude/site-formatting-polish-b91374`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Docstrings generation was requested by @BigSimmo. * https://github.com/BigSimmo/Database/pull/494#issuecomment-4946394567 The following files were modified: * `src/components/DocumentTagCloud.tsx` * `src/components/applications-launcher-page.tsx` * `src/components/clinical-dashboard/favourites-command-library-page.tsx` * `src/components/clinical-dashboard/favourites-library-nav.tsx` * `src/components/differentials/differential-detail-page.tsx` * `src/components/services/service-detail-page.tsx` --- 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 985915809..14a40fb59 100644 --- a/src/components/DocumentTagCloud.tsx +++ b/src/components/DocumentTagCloud.tsx @@ -61,6 +61,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 009d0586a..12d71058d 100644 --- a/src/components/applications-launcher-page.tsx +++ b/src/components/applications-launcher-page.tsx @@ -322,6 +322,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,