From 2c6eebfc38c39c98c6481de08d85f8bd8014393c Mon Sep 17 00:00:00 2001
From: Marcus Souza <marcus.souza@azion.com>
Date: Mon, 21 Sep 2026 19:02:54 -0300
Subject: [PATCH] fix(page-content): align the masthead, prose, and pagination
 on one theme column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#2380 swapped the prose section from `px-container` to `layout-boundary-inline`,
but that utility only sets the inline gutter — the measure and the centering live
in the `layout-column-*` utilities, whose max-width rule is nested behind
`&:is(.layout-boundary, .layout-boundary-inline)`. The prose lost both and ran the
full width of the content column, 193px left of the title it sits under.

Finish the migration instead of reverting it. The three blocks of the article now
read one COLUMN constant, and the masthead — still full bleed, so its rule stays
the page's horizon — derives its inset from the same two tokens rather than a
hand-written copy of `px-container`'s math, which drops the media query with it.

`px-container` had no callers left, so it goes.

Measured on the dev server: title, prose and pagination all land on 515 -> 1391 at
1920. Alignment holds across 11 container widths x both values of
`--layout-boundary-inline`, covering both branches of the `max()`.

The prose measure changes from 960px to 876px: no theme column reproduces 960
(`px-container` put the gutter inside its max-width, the theme columns put it
outside), and `--layout-measure-content` is the token named for this.
---
 src/components/PageContent/PageContent.astro | 29 +++-----------------
 src/layouts/DocsDirectoryLayout.astro        |  2 +-
 src/styles/main.css                          | 13 ---------
 3 files changed, 5 insertions(+), 39 deletions(-)

diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro
index 07be96ec6e..0753458490 100644
--- a/src/components/PageContent/PageContent.astro
+++ b/src/components/PageContent/PageContent.astro
@@ -36,6 +36,7 @@ const agentSetupHref =
 		? undefined
 		: await getPageHref('documentation_agent_setup', lang as Lang);
 const t = useTranslations(Astro);
+const COLUMN = 'layout-column-content layout-boundary-inline';
 const headerLabels = {
 	lastUpdated: t('pageHeader.lastUpdated'),
 	copy: t('pageHeader.copy'),
@@ -79,7 +80,7 @@ const headerLabels = {
 				/>
 			)
 		}
-		<section class="layout-boundary-inline">
+		<section class={COLUMN}>
 			<ReadableContent client:load>
 				{
 					isFallback && (
@@ -100,7 +101,7 @@ const headerLabels = {
 					next={next && { title: next.text, href: next.link }}
 					previousLabel={t('articleNav.prevPage')}
 					nextLabel={t('articleNav.nextPage')}
-					class="px-container pt-12"
+					class={`${COLUMN} pt-12`}
 				/>
 			)
 		}
@@ -108,29 +109,7 @@ const headerLabels = {
 </div>
 
 <style is:global>
-	/*
-	 * THE BANNER IS FULL BLEED, ITS CONTENT IS CONTAINED. The masthead keeps the
-	 * whole column's width — its `border-b` is the page's horizon and has to reach
-	 * both edges — so the alignment is paid for in padding rather than by wrapping
-	 * it in `px-container`, which would pull the rule in with the words.
-	 *
-	 * The padding is `px-container`'s own math: the centering margin a 4xl column
-	 * would have taken, `(100% - 4xl) / 2`, and never negative — `min(100%, …)`
-	 * folds it to zero while the column is narrower than the measure — plus that
-	 * utility's gutter at the same breakpoint. Change one and change the other, or
-	 * the title stops sitting over the first paragraph.
-	 *
-	 * Unlayered on purpose: a plain declaration outranks Tailwind's layered
-	 * utilities, so this needs no `!important` — and, because Tailwind is imported
-	 * in `important` mode here, an `!important` override would have lost anyway.
-	 */
 	.doc-page-banner {
-		padding-inline: calc((100% - min(100%, var(--container-4xl))) / 2 + 1rem);
-	}
-
-	@media (min-width: 768px) {
-		.doc-page-banner {
-			padding-inline: calc((100% - min(100%, var(--container-4xl))) / 2 + 2rem);
-		}
+		padding-inline: max(var(--layout-boundary-inline), (100% - var(--layout-measure-content)) / 2);
 	}
 </style>
diff --git a/src/layouts/DocsDirectoryLayout.astro b/src/layouts/DocsDirectoryLayout.astro
index 7cceb1c4c0..8604ba38ee 100644
--- a/src/layouts/DocsDirectoryLayout.astro
+++ b/src/layouts/DocsDirectoryLayout.astro
@@ -3,7 +3,7 @@
 // Three pieces of the reading shell are wrong for one, and each is dropped here: the docs
 // rail (`primarySidebar={false}` — the page's own filter column is the navigation), the
 // "On this page" outline (no `secondary-sidebar` slot, so no third track is reserved), and
-// `PageContent`'s prose measure (4xl, the one width a card grid must not take). The docs
+// `PageContent`'s prose measure (3xl, the one width a card grid must not take). The docs
 // container stays, so the shell holds under the first link out. The closing prev/next pair
 // does not: it walks a reading SEQUENCE, and a catalog is the thing you pick from, not a
 // page in one — "Next page" under 351 cards names a neighbour nobody was reading toward.
diff --git a/src/styles/main.css b/src/styles/main.css
index 9f80ee805d..f35b613aa4 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -19,19 +19,6 @@
 	}
 }
 
-@utility px-container {
-	max-width: var(--container-4xl);
-	margin-left: auto;
-	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
-
-	@media (min-width: 768px) {
-		padding-left: 2rem;
-		padding-right: 2rem;
-	}
-}
-
 /* THE DOCS HOME OPENS ITS SECTIONS ONE RUNG WIDER THAN THE PROSE LADDER. DocProse pins
    its section step to a flat 56, a rung fitted to FLOWING COPY; every section here is a
    heading, one sentence and a bordered grid, so at 56 the grids read as one stack with