Skip to content

Align contained header with contained page content - #100

Merged
thomasgallagher merged 1 commit into
mainfrom
fix-contained-header-alignment
Jun 8, 2026
Merged

Align contained header with contained page content#100
thomasgallagher merged 1 commit into
mainfrom
fix-contained-header-alignment

Conversation

@thomasgallagher

Copy link
Copy Markdown
Collaborator

Move the page gutter from .l-ui-header onto .l-ui-header-container so the gutter sits outside the width cap on both the header and .l-ui-page__contained. The contained header now caps its content at --l-ui-contained-width within the same gutter-inset frame as the page column, so the two align by construction.

Move the page gutter from .l-ui-header onto .l-ui-header-container so the
gutter sits outside the width cap on both the header and .l-ui-page__contained.
The contained header now caps its content at --l-ui-contained-width within the
same gutter-inset frame as the page column, so the two align by construction.
@claude

claude Bot commented Jun 8, 2026

Copy link
Copy Markdown

Review

Moves the page gutter (px-[var(--l-ui-gutter)]) from the inner .l-ui-header element to the outer .l-ui-header-container, mirroring how .l-ui-page owns its own gutter. This fixes a pre-existing alignment bug where .l-ui-body--header-contained applied max-w + mx-auto on top of existing padding, causing the contained header content to be offset by one gutter width relative to .l-ui-page__contained. The CSS reference doc is updated to match.

Ship - Clean, correct fix with no regressions; the structural change is sound and the alignment is now consistent by construction.

@thomasgallagher
thomasgallagher merged commit eb68a41 into main Jun 8, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant