Previous/next navigation can be too wide on small screens

Open Beginner friendly
#2,486 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
1-3 hours
Newbie friendliness
86/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css
Domain
documentation

Research direction

Start in src/components/patterns/DocBottomNav/DocBottomNav.css, focusing on the .doc-nav rules linked in the issue. Check the navigation on the migrating-to-Express-4 guide at a small viewport and choose the wrapping behavior that keeps both controls within the page width. Done means the Previous/Next navigation no longer causes horizontal overflow or a large empty gap on narrow screens.

Written by the indexing model from the issue text.

Description

bug design

Example on https://expressjs.com/en/guide/migrating-4/ (with #2485 (preview), because without it tables cause the same problem):

Screenshot of a mobile preview of "Migrating to Express 4" guide. Previous and Next buttons in bottom navigation both have long descriptions and are placed on the same line. They are too wide, causing a gap on the right in remaining sections on the website.

Possible solutions
  1. flex-wrap: wrap-reverse in .doc-nav - I think that "Next" being above "Previous" should make the navigation easier (most of the time people are reading from start to the end)
    Same preview as earlier, but now the Next button shows above the Previous button and both have arrows, which were not visible earlier. The page is sized correctly.
  2. flex-wrap: wrap in .doc-nav
    Screenshot similar to the one above (point 1), but the Previous button is above Next.
Dominant language
MDX
Stars
5.4k
Forks
2.3k
Avg merge
2d 23m
Merged PRs (30d)
14

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from expressjs/expressjs.com

All issues in expressjs/expressjs.com

Similar issues

More Documentation issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.