Footer previous/next labels cut-off for short page titles

[kamilkrzyskow]

Context

The footer displays incorrectly based on the page width and footer.previous and footer.next text length.
It's more visible on other languages than English, e.g. Polish.

Bug description

There are 2 issues, the first could be just my preference, but I'll still attach it here:

1. If the page width is too small (mobile-like) then the left footer text disappears. My expectation is that the text will stay, and if there is too little space to display the whole text of both the previous and next buttons, then the next button should move below the previous button. I only fixed the disappearing text to stay like so:

@media screen and (max-width: 44.9375em) {
    .md-footer__link--prev .md-footer__title {
        display: block;
    }
}

2. The footer.previous and footer.next text gets cut off when the page title is shorter than either of them. The footer.next page title position can also shift a little in line height. The footer.next also isn't aligned to the page title by the right border. One quick fix is to set flex-grow to 0.5 or higher like so:

.md-footer__link {
    flex-grow: 1;
}

Related links

• Reporting a bug
• Related discussion Previous page text is shown only partially when page name is short #5280

Reproduction

example.zip

Steps to reproduce

1. Open the example site.
2. Navigate to B.
3. Decrease the width of the viewport.
4. Notice that at some point the Previous button content disappears.

---

1. Open the example site.
2. Navigate to B.
3. On 1080p, notice that Previous is cut off and only Previou is visible, notice that Next isn't properly aligned with the C title.
4. Open BBB... and see that Previous is fully visible and that Next is properly aligned with C.
5. If you need a stronger example, change theme.language to pl.

There is also a video with a "reproduction" in the discussion linked above.

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting, for the excellent reproduction, and for investigating potential solutions! This issue is of outstanding quality, which is why we give it the 🏆 perfect badge! The problem with the direction labels being cut off stems from the fact that they're absolutely positioned and thus don't count towards the computed width of the previous/next link. I did a slight refactoring in f4d894d, removing the absolute positioning, so the widths should now always correctly computed. I tested with very long and very short labels and evaluated your example and think I found all cases. Your questions:

1. Intended behavior, please see Footer label and title to previous page displayed on Nexus 6P #491 (comment). If you wish to customize it, setting display: flex !important on .md-footer_title should make it always show.
2. This is a reasonable fix, but it will stretch the buttons towards the center, which means the whole area is clickable. This was the case before the last refactoring, but I think this is not a very good design, because when titles are short, a very large part of the "dead space" is clickable, which might be unexpected. Thus, we removed the stretching behavior and links are now only as wide as necessary. This introduced the problem reported, but it should now be fixed.

[kamilkrzyskow]

Thank you very much for the in-depth explanation and perfect badge, even though I didn't find the older footer issues (I swear I looked), and broke the rule of 1 issue = 1 GitHub issue ✌️
I downloaded the commit to try it out and everything looks fine 👍

Setting display: flex !important on .md-footer_title together with flex-direction: column results in the same behavior as before (with display: block), at least I don't see any difference. Seeing that modifying flex is the way I tinkered a bit more, and managed to get the Next button below the Previous button via adding flex-flow: wrap to the parent nav. However, it doesn't look as good as I imagined it would 😅. Maybe adding dynamic centering of the button contents would help, but I didn't manage to make it work properly, because the arrows offset the text differently depending on the button 😞.
Anyways it's not that important.

---

Looking at the flex layout I noticed that the arrows are "aligned with" the page title instead of the whole content. I prefer the latter. I set align-items: flex-start on .md-footer__link

[squidfunk]

I replicated the previous layout, which aligns the arrow with the title, as IMHO the direction label can be considered secondary. However, thanks for sharing your adjustment, so other users can apply it if they prefer the centered look ☺️

[squidfunk]

Released as part of 9.1.5.