Skip to content

fix(www): align docs content with header logo below xl #697

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

Open
mehdibha wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(www): align docs content with header logo below xl #697

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
849ed81
fix(www): align docs content with header logo below xl
mehdibha Sep 1, 2026
de5bc0f
fix(www): pin docs MiniTOC to viewport edge on wide pages
mehdibha Sep 1, 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
16 changes: 14 additions & 2 deletions www/src/routes/_app/docs/-docs-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,20 @@ export const clientLoader = browserCollections.docs.createClientLoader({
<PageLayout className="mt-4 flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full">
<div
className={cn(
"mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 lg:px-0 dark:text-neutral-300",
full ? "max-w-4xl" : "max-w-2xl",
// Padding tracks the header's logo inset (pl-4/md:pl-6). Narrow
// pages center at every width (left-hugging strands them far from
// the MiniTOC); wide (full) pages nearly fill the row below lg,
// so they hug the left edge to stay aligned with the logo, and
// keep lg padding until xl centering slack separates them from
// the sidebar and MiniTOC rails.
"flex w-full min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-6 dark:text-neutral-300",
// mr-auto: when the column hits max-w below lg, the auto margin
// absorbs the leftover flex space so the MiniTOC column stays
// pinned to the viewport edge (aligned with the header's menu
// button) instead of trailing the capped column.
full
? "mr-auto max-w-4xl lg:mx-auto lg:px-8 xl:px-0"
: "mx-auto max-w-2xl lg:px-0",
)}
>
<div data-page-header="" className="relative mb-2 space-y-3 pb-4">
Expand Down
Loading