Table of Contents overflows with custom content width

[trueberryless]

What version of starlight are you using?

0.36.2

What version of astro are you using?

5.6.1

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Firefox (Zen)

Describe the Bug

When setting --sl-content-width to a custom value greater than the default 45rem, the Table of Contents (ToC) overflows outside the right side of the screen.

Example:

• Sharp Docs (resize window width to around 1200px to see the overflow): They set the content width to 60rem
• Aspire Docs (resize window width to around 1400px to see the overflow): They set the content width to 68rem (no public repo found)

I'm not sure how to fix this cleanly, as I do not fully understand why the width of the ToC is not calculated correctly. I mean, this calculation should make sure that the ToC is not overflowing.

Another potential solution that came to my mind is making the breakpoint of when the ToC will be in the mobile version dynamic. In other words: If the content width is higher, the ToC has less space and should have a higher @media (min-width: <higher>rem, so that it is longer displayed over the main content. However, variables are not supported in media queries as far as I now: width spec ↦ Unit spec ↦ overall Unit definition.

I open for implementing the fix when we have discussed the best way to handle this bug. Maybe we do not even need to handle it as the user themselves are changing the default values, but I think since the calculation is already dynamic, we should not just support the default values from Starlight.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-fmckqvbh?file=src%2Fstyles%2Fcustom.css

Participation

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

Suggested labels

• 🐛 Bug

[IEvangelist]

Could we use the env as mentioned here?