Pages with and without "Contents" have different widths

[fmaussion]

Describe the bug

The left-hand bar moves a little when switching between pages. Best explained with a video:

miro-2022-01-29_15.57.00.mp4

Reproduce the bug

Have a page with, and a page without Level 2 headers in it, build the book, and switch between them.

List your environment

Jupyter Book : 0.12.1
External ToC : 0.2.3
MyST-Parser : 0.15.2
MyST-NB : 0.13.1
Sphinx Book Theme : 0.1.10
Jupyter-Cache : 0.4.3
NbClient : 0.5.10

[pradyunsg]

Do you have this documentation hosted somewhere, or the source code for it available online such that we can build a documentation set with this issue?

Asking because that'd make investigating this easier! :)

[fmaussion]

@pradyunsg sure, sorry I should have thought of it:

• code: https://github.com/fmaussion/intro_to_programming
• build: https://fabienmaussion.info/intro_to_programming

Switching between "Welcome" and "Syllabus" makes the small shift - really really not a big deal, but enough to be noticed.

[fmaussion]

Switching between "Welcome" and "Syllabus"

Actually now I notice, it's probably because of the image in the right side bar, because it doesn't occur with another page which hasn't this image

[fmaussion]

Sorry for the noise, false alarm: removing the margin image doesn't solve the problem...

[choldgraf]

I think that this is now resolved by the HTML refactoring in #471 . For example:

• https://sphinx-book-theme.readthedocs.io/en/latest/reference/thebe.html has a contents block
• https://sphinx-book-theme.readthedocs.io/en/latest/reference/blog.html does not

will close this - but please re-open if the problem persists when using the master branch of this repo!

[da5nsy]

This issue is occurring on the latest build of the Turing Way in the-turing-way/the-turing-way#2309

but only for some pages...

Has contents, wide:
https://deploy-preview-2309--the-turing-way.netlify.app/reproducible-research/testing/testing-overview.html

No contents, wide:
https://deploy-preview-2309--the-turing-way.netlify.app/reproducible-research/testing/testing-runtime.html

No contents, narrow:
https://deploy-preview-2309--the-turing-way.netlify.app/reproducible-research/testing/testing-smoketest.html

[choldgraf]

@da5nsy something weird I just noticed - on the second page the scroll bar wasn't present. When I scrolled up or down, then it showed up and the width was the same as the other pages. Upon subsequent reloads, the scroll bar was there by default. Do you experience this?

If this behavior is due to the scroll bar showing up on some pages and not on others (because of content length etc) this will be hard to fix with CSS rules

[pradyunsg]

FYI: The hacky solution that Furo uses for the scrollbar-on-tall-page-height is... always having a scrollbar on the page. :)

https://github.com/pradyunsg/furo/blob/c386171ffad12d069cc179fb5d77c75145f21d22/src/furo/assets/styles/_scaffold.sass#L16

[fmaussion]

FYI: The hacky solution that Furo uses for the scrollbar-on-tall-page-height is... always having a scrollbar on the page. :)

Seems like the perfect solution to me 😉

[da5nsy]

All 3 above examples appear the same width to me today 🤷 (on a different machine today but...). I will update if I can work anything else out...

[choldgraf]

Maybe it is because one of your machines has a taller screen? That could explain why the scroll bar shows up on one but not the other.

IMO @pradyunsg has a reasonable approach to just make it appear all the time

[da5nsy]

Maybe it is because one of your machines has a taller screen? That could explain why the scroll bar shows up on one but not the other.

Just tested. Spot on @choldgraf! 🌟