Skip to content

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

@kamilkrzyskow

Description

@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; } }
  1. 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

  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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue reports a bugresolvedIssue is resolved, yet unreleased if open🏆 perfectIssue is of outstanding quality

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions