What version of starlight are you using?

0.32.6

What version of astro are you using?

5.6.1

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

On project having a custom banner (or theme with custom banners) that would change the height, padding-block or margin-block of the banner, when displaying the table of contents on mobile, the ToC will initially not display the current element.

This is visible on the Starlight Flexoki or Starlight Rapide themes.

I did not investigate yet but I would assume that this is related to how the root margin for the intersection observer is calculated and does not handle for such cases.

Note that the linked reproduction on StackBlitz does not seem to reproduce the issue (didn't investigate why), so it's linked as an example that should be downloaded or just having a page with the following content will reproduce the issue:

---
title: Test page with custom banner
banner:
  content: A random banner
head:
  - tag: style
    content: |
      :root .sl-banner {
        background-color: red;
        color: white;
        padding-block: 2rem;
      }
---

Link to Minimal Reproducible Example

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

Participation

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