Skip to content

docs: widen Starlight content column on large screens without mid-width TOC regressions - #38230

Merged
pelikhan merged 2 commits into
mainfrom
copilot/update-astro-starlight-css
Jun 9, 2026
Merged

docs: widen Starlight content column on large screens without mid-width TOC regressions#38230
pelikhan merged 2 commits into
mainfrom
copilot/update-astro-starlight-css

Conversation

CopilotAI commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Starlight’s default central content width is narrow for long-form docs on large displays, but globally increasing it can cause right-rail TOC overflow at intermediate viewport widths. This change increases readable line width only where layout headroom is reliable.

  • What changed

    • Added a large-screen-only override for Starlight’s central content column in docs/src/styles/custom.css.
    • Kept existing Starlight customCss integration unchanged (docs/astro.config.mjs already registers ./src/styles/custom.css).
  • CSS update

    • Applies at min-width: 1200px.
    • Sets content width to 60rem.
@media (min-width:1200px) {
:root {
--sl-content-width:60rem;
}
}

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
CopilotAI changed the title docs: widen Starlight content column on large screensdocs: widen Starlight content column on large screens without mid-width TOC regressionsJun 9, 2026
CopilotAI requested a review from pelikhanJune 9, 2026 23:20
@pelikhan
pelikhan marked this pull request as ready for review June 9, 2026 23:20
CopilotAI review requested due to automatic review settings June 9, 2026 23:20
@pelikhan
pelikhan merged commit 1319971 into mainJun 9, 2026
2 checks passed
@pelikhan
pelikhan deleted the copilot/update-astro-starlight-css branch June 9, 2026 23:20

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the docs site styling to increase the maximum readable content width on larger screens.

Changes:

  • Adds a new large-screen media query to override --sl-content-width to 60rem.
Show a summary per file
FileDescription
docs/src/styles/custom.cssAdds a breakpoint-based override for the docs content width variable.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

  • Files reviewed: 1/1 changed files
  • Comments generated: 1

Comment on lines +56 to +61
/* Widen central docs content on large screens while avoiding TOC overflow on mid-width viewports. */
@media (min-width: 1200px) {
:root {
--sl-content-width: 60rem;
}
}
Sign up for freeto 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.

3 participants

@pelikhan