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:
- 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;
}
}
- 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
Reproduction
example.zip
Steps to reproduce
- Open the example site.
- Navigate to
B.
- Decrease the width of the viewport.
- Notice that at some point the
Previous button content disappears.
- Open the example site.
- Navigate to
B.
- On 1080p, notice that
Previous is cut off and only Previou is visible, notice that Next isn't properly aligned with the C title.
- Open
BBB... and see that Previous is fully visible and that Next is properly aligned with C.
- 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
Context
The footer displays incorrectly based on the page width and
footer.previousandfooter.nexttext 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:
previousandnextbuttons, then thenextbutton should move below thepreviousbutton. I only fixed the disappearing text to stay like so:footer.previousandfooter.nexttext gets cut off when the page title is shorter than either of them. Thefooter.nextpage title position can also shift a little in line height. Thefooter.nextalso isn't aligned to the page title by the right border. One quick fix is to setflex-growto0.5or higher like so:Related links
Reproduction
example.zip
Steps to reproduce
B.Previousbutton content disappears.B.Previousis cut off and onlyPreviouis visible, notice thatNextisn't properly aligned with theCtitle.BBB...and see thatPreviousis fully visible and thatNextis properly aligned withC.theme.languagetopl.There is also a video with a "reproduction" in the discussion linked above.
Browser
No response
Before submitting