Fix document outline overflowing off the screen

[mfisher87]

Resolves #337

I've tested this change in my browser dev tools, and attempted to translate the change which worked there into the myst-theme code. I think I've done it in the right place, but I've been unable to follow the development instructions to test this so far. Opened #666 ( 😆 ) for that.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8e1576d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@myst-theme/site	Patch
@myst-theme/providers	Patch
@myst-theme/frontmatter	Patch
@myst-theme/diagrams	Patch
@myst-theme/jupyter	Patch
@myst-theme/styles	Patch
@myst-theme/common	Patch
@myst-theme/icons	Patch
@myst-theme/search	Patch
@myst-theme/search-minisearch	Patch
@myst-theme/landing-pages	Patch
@myst-theme/book	Patch
@myst-theme/article	Patch
myst-to-react	Patch
myst-demo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for myst-theme ready!

Name	Link
🔨 Latest commit	8e1576d
🔍 Latest deploy log	https://app.netlify.com/projects/myst-theme/deploys/691cccef1cc72300084f037e
😎 Deploy Preview	https://deploy-preview-665--myst-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mfisher87]

Marked this as ready for review despite the fact that I did not properly test it, because the change is very simple and provides significant value to many users, including readers of the MyST documentation (I encountered this bug when reading the development docs) and participants in the JupyterCon workshop I'm helping to organize next week. I hope that's not out of line or burdensome!

[agoose77]

Thanks for this PR. How did you settle on the particular length value?

[mfisher87]

Trial-and-error in the browser dev tools :) I think there's likely a better solution which doesn't require magic numbers, but I don't know what it is and felt it was more important to replace the current magic number with a better magic number to fix the bug in the short-term ;)

[choldgraf]

We took a look at this in the colab cafe, here's where we landed:

• We'll merge this!
• It is an improvement over what's there, because currently you cannot access the bottom of a long TOC.
• It exposed a bug where the TOC overlaps with the footer, but this is still an improvement