Banner is off-center on larger screen sizes

[Fryuni]

What version of starlight are you using?

0.21.5

What version of astro are you using?

4.6.0

What package manager are you using?

pnpm

What operating system are you using?

Mac, but happens on any OS

What browser are you using?

Chrome, but happens on any browser

Describe the Bug

The banner is not centered correctly on larger screens.

On smaller screens, the banner is aligned with the center of the page and the content. I'd expect that to remain true as the screen-size increases. However, once the content reaches its maximum width, the banner gets off-center since it is actually being centered on the total space between the two sidebars.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-alovcj?file=src%2Fcontent%2Fdocs%2Findex.mdx

Participation

• I am willing to submit a pull request for this issue.

[delucis]

Oh man, good catch! I… am not sure what the correct fix here is (except for only using banner with the table of contents disabled 😄).

Aligning the text with the page contents looks odd because it is then off-center in relation to the banner background:

But equally cutting off the banner background doesn’t look great:

I’ll admit that the current banner placement was chosen kind of quickly and pragmatically.

Other common locations don’t work super well with Starlight’s layout:

• Above everything else at the top of the page — becomes problematic due to Starlight’s sticky header. If the header scrolled out of view, it could be less disruptive (see Docusaurus for an example). This was also a little API related — we landed on a page-specific banner API to make i18n easier, but the position at the top of the page suggests a global banner more than a page banner:

  

• Above the content pane would be another possibility, more aligned with our “per-page” banner, but that structure has some of the same issues as the previous possibility: given the nav bar is fixed, should the banner scroll? If it does, we probably want to also scroll the table of contents right sidebar up a little when it moves out of the viewport, so there isn’t a strange gap at the top.

  

Probably solving something for this last option would be the best approach if we can do it? It already works on mobile quite OK, so it would just be the details of the desktop behaviour that need fixing. One thing that should also be checked for accessibility is that this would move the banner outside of <main>.

[Fryuni]

I've known this problem for months now, I just kept forgetting to report it. I fixed it on my fork long ago with your last option.

The banner is not fixed as you scroll down the page, so the right sidebar feels like it is floating. That was the best I could do with my limited front-end abilities.

https://fryuni.dev/deep-dive/astro-view-transitions/browser-api/:

[delucis]

Yes, exactly. I think that direction but with the right sidebar scrolling up to look less out of place would make sense. I actually don’t hate the lower ToC, but it would be inconsistent with pages without a banner I guess.