Skip to content

fix(page-content): align the masthead, prose, and pagination on one theme column #2382

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
marcus-souza-azion merged 1 commit into from
Sep 21, 2026
Merged

fix(page-content): align the masthead, prose, and pagination on one theme column #2382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 4 additions & 25 deletions src/components/PageContent/PageContent.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -79,7 +80,7 @@ const headerLabels = {
/>
)
}
<section class="layout-boundary-inline">
<section class={COLUMN}>
<ReadableContent client:load>
{
isFallback && (
Expand All @@ -100,37 +101,15 @@ 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`}
/>
)
}
</article>
</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>
2 changes: 1 addition & 1 deletion src/layouts/DocsDirectoryLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
13 changes: 0 additions & 13 deletions src/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading