Skip to content

style: token the Dictionary catalogue's repeated max-w-[76rem]#2355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BigSimmo merged 2 commits into from
Aug 24, 2026
+11 −7
Merged

style: token the Dictionary catalogue's repeated max-w-[76rem] #2355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94bb968
style: replace arbitrary max-w-[76rem] with a named --content-width-c…
claude Aug 24, 2026
50844b1
Merge branch 'main' into claude/dictionary-catalogue-width-token
BigSimmo Aug 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -310,6 +310,7 @@
/* Layout constraints */
--content-max-width: 1440px;
--rail-width: 480px;
--content-width-catalogue: 76rem;

/* Clinical White: true-neutral graphite-to-ash ramp (de-blued). */
--neutral-0: #ffffff;
Expand Down
13 changes: 8 additions & 5 deletions src/components/dictionary/dictionary-catalogue-pages.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -381,12 +381,12 @@ export function DictionaryCataloguePage() {
id={modeHomeDesktopComposerSlotId}
data-testid="dictionary-catalogue-composer"
data-composer-reserve={modeHomeComposerReservePendingValue}
className="mode-home-composer-slot mx-auto hidden w-full max-w-[76rem] min-w-0 px-4 pt-3 sm:block sm:px-6 sm:pt-4 sm:min-h-0 sm:data-[composer-reserve=pending]:min-h-[var(--spacing-mode-home-composer-wide)] sm:[&:not(:empty)]:min-h-[var(--spacing-mode-home-composer-wide)]"
className="mode-home-composer-slot mx-auto hidden w-full max-w-[var(--content-width-catalogue)] min-w-0 px-4 pt-3 sm:block sm:px-6 sm:pt-4 sm:min-h-0 sm:data-[composer-reserve=pending]:min-h-[var(--spacing-mode-home-composer-wide)] sm:[&:not(:empty)]:min-h-[var(--spacing-mode-home-composer-wide)]"
/>
<h1 className="sr-only">Dictionary catalogue</h1>
{/* The original Filter band stays on browse and search. Compact Terms /
Abbreviations and A–Z sit underneath on the right. */}
<div className="mx-auto w-full max-w-[76rem] px-4 pb-2 sm:px-6 sm:pb-3">
<div className="mx-auto w-full max-w-[var(--content-width-catalogue)] px-4 pb-2 sm:px-6 sm:pb-3">
<SearchResultsHeaderBand
modeId="dictionary"
query={params.q}
Expand DownExpand Up@@ -438,7 +438,10 @@ export function DictionaryCataloguePage() {
})}
</nav>
</div>
<div id="dictionary-catalogue-results" className="mx-auto w-full max-w-[76rem] px-0 py-3 sm:px-6 sm:py-4">
<div
id="dictionary-catalogue-results"
className="mx-auto w-full max-w-[var(--content-width-catalogue)] px-0 py-3 sm:px-6 sm:py-4"
>
{hits.length ? (
<section
aria-label="Dictionary catalogue"
Expand DownExpand Up@@ -597,7 +600,7 @@ export function DictionaryTopicsPage() {
return (
<>
<InformationPageShell width="bleed" gap={false} testId="dictionary-topics-main">
<div className="mx-auto grid w-full max-w-[76rem] gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_18rem] lg:py-8">
<div className="mx-auto grid w-full max-w-[var(--content-width-catalogue)] gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_18rem] lg:py-8">
{/* A `div`, not a `main`: `InformationPageShell` already renders the
route's `<main>`, and a nested one is a duplicate landmark. */}
<div className="min-w-0">
Expand DownExpand Up@@ -850,7 +853,7 @@ export function DictionaryTopicDetailPage({ topicSlug }: { topicSlug: string })
}
/>
<InformationPageShell width="bleed" gap={false} testId="dictionary-topic-detail-main">
<div className="mx-auto grid w-full max-w-[76rem] gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_18rem] lg:py-8">
<div className="mx-auto grid w-full max-w-[var(--content-width-catalogue)] gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_18rem] lg:py-8">
<div id="dictionary-topic-terms" className="min-w-0 scroll-mt-page-section">
<h1 className="text-3xl font-extrabold tracking-tight text-[color:var(--text-heading)] sm:text-4xl">
{topic.title}
Expand Down
2 changes: 1 addition & 1 deletion src/components/dictionary/dictionary-sources-page.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -94,7 +94,7 @@ export function DictionarySourcesPage() {

return (
<InformationPageShell width="bleed" gap={false} testId="dictionary-sources-main">
<div className="mx-auto w-full max-w-[76rem] px-4 py-6 sm:px-6 sm:py-8">
<div className="mx-auto w-full max-w-[var(--content-width-catalogue)] px-4 py-6 sm:px-6 sm:py-8">
<header>
<p className="text-xs font-extrabold uppercase tracking-kicker text-[color:var(--clinical-accent)]">
Dictionary governance
Expand Down
2 changes: 1 addition & 1 deletion src/components/differentials/diagnosis-map-panel.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -997,7 +997,7 @@ export function DiagnosisMapPanel({
description={`${record.title} · ${record.related.length} related differential${record.related.length === 1 ? "" : "s"}`}
closeLabel="Close diagnosis map"
mobilePlacement="fullscreen"
contentClassName="lg:max-w-[76rem]"
contentClassName="lg:max-w-[var(--content-width-catalogue)]"
headerClassName="pt-[max(1rem,env(safe-area-inset-top))] lg:pt-5"
bodyClassName="p-0 overflow-y-auto lg:overflow-hidden"
portal
Expand Down
Loading