Jupyter-book: "prev-next-bottom" improper display.

[MantiMantilla]

Describe the bug

The buttons at the bottom of each page for the next and the previous pages will sometimes get mushed to the left of the page and clip into the page footer.

To Reproduce

Steps to reproduce the behavior:

1. For some page in the book, make the title of the next page so long that it wraps inside the next page button.
2. Make the title of the previous page short so it won't wrap.
3. See how, for the current page, the buttons lose some styles and aren't properly aligned.

Notice how this also happens if the previous button wraps its text but the next doesn't

Expected behavior

Despite either the previous page or next page buttons wrapping their text, the buttons should display with their respective anchor styles and not clip into the page footer.

Repo.

Example

Improper:

Proper:

Environment

Github-Workflow ubuntu-latest environment.

• Python Version: 3.7
• Package versions or output of jupyter-book --version:
  Jupyter Book: 0.8.3 MyST-NB: 0.10.1 Sphinx Book Theme: 0.0.38 MyST-Parser: 0.12.10 Jupyter-Cache: 0.4.1 NbClient: 0.5.1
• Operating System: Ubuntu-latest, though this also happens when building on Windows 10.

Additional context

I doubt this is a Sphinx issue. Rather, I'll look into the jupyter book theme and see what can be done to fix this.

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! :tada:

[MantiMantilla]

Including the following CSS in the _static/ directory fixes the issue and seems to not break anything else. I'll keep it as a temporary solution until this gets addressed.
CSS .prev-next-bottom { width: 100% !important; } .prev-next-bottom > a{ color: rgba(0,0,0,.65) !important; }
I don't think the !important tag is necessary for the width rule but I'll keep it there just to be safe.
This is more of a workaround since it might not fix the issue for REALLY long titles.

[choldgraf]

Thanks for posting your fix for this 👍 - I wonder if the improvements that @pradyunsg made in the SBT will also address any of this

[pradyunsg]

I definitely changed things, but I didn't test wrapping of the titles, mostly because none of the pages I tried had long-enough titles, so... Idk. 🙃

[MantiMantilla]

When did these changes come into effect? I can try rebuilding the book without the new styling rules and see if the issue persists. Is there something I need to do so JB uses the latest SBT or does it ship the latest by default?

[choldgraf]

I think right now this is on master branch of the sphinx book theme, so it hasn't yet been released. If you install master then you could give it a shot! If so please do report back :-)

[MantiMantilla]

I finally got around to checking this out! Sorry for the wait.

Indeed, it would seem @pradyunsg fixed this in his changes to the sphinx-book-theme.

Using pip version: (the one that installs as a _jupyter-book_ dependency)

Using the latest theme: (git clone and install master. Had to learn to do this, setting up the _config.yml gave me a headache)

I'll stick to the pip release and use my CSS workaround since I don't want to break my actions workflow in case anything changes in the master branch. I will stay on the lookout for updates to the pip release.

I also fooled around and tried using _furo_ directly with _jupyter-book_.

Using _furo_ theme: (through pip install)

These buttons also do not break with long titles! Thought you might want to know since I hear you might implement them in _SBT_ too.

PD. I should say, I tested all of these on mobile too. The pip release breaks the same while the other two work fine.

[MantiMantilla]

This is no longer an issue but I'll leave it to you to close it.

I'm thinking you could keep it until the pip release reflects these changes? I'm new to GitHub so I don't really know what's proper etiquette. Sorry!