"prev-next-bottom" improper display.

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.

[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

[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.

.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.