expressjs / expressjs/expressjs.com
Previous/next navigation can be too wide on small screens
- Dominant language
- MDX
- Stars
- 5.4k
- Forks
- 2.3k
- Avg merge
- 2d 23m
- Merged PRs (30d)
- 14
Description
Example on https://expressjs.com/en/guide/migrating-4/ (with #2485 ([preview](https://deploy-preview-2485--expressjscom-preview.netlify.app/en/guide/migrating-4/)), because without it tables cause the same problem):
### Possible solutions
1. `flex-wrap: wrap-reverse` in [`.doc-nav`](https://github.com/expressjs/expressjs.com/blob/61e6f789388cf1f56476e9c05550451bcf3347c4/src/components/patterns/DocBottomNav/DocBottomNav.css#L2-L9) - I think that "Next" being above "Previous" should make the navigation easier (most of the time people are reading from start to the end)
2. `flex-wrap: wrap` in [`.doc-nav`](https://github.com/expressjs/expressjs.com/blob/61e6f789388cf1f56476e9c05550451bcf3347c4/src/components/patterns/DocBottomNav/DocBottomNav.css#L2-L9)
Contributor guide
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.
Assessment
- Tech stack
- css
- Domain
- documentation
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 86/100