matrix-org / matrix-org/matrix.org
Navbar spacing is unconstrained, leading to spacing issues at larger resolutions
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 616
- Forks
- 463
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 19
Description
Navbar nav link spacing is defined solely in relation to viewport width, which starts breaking appart at some viewport sizes:
- All nav links dissapear at ~1150px viewport width (seems oddly high?)
- All nav links get spaced out *a lot* at a larger viewport width (eg. ~2150px)
I'll be mainly covering the latter in this issue though...
After some experimenting, I ended up with applying `.site-header {--header-padding: min(1.5dvw,32px);}` and ended up with this result, which seems a lot closer to what was intended (and also works well across viewport sizes):
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the navbar styles that define .site-header and --header-padding, then reproduce the spacing at approximately 1150px and 2150px viewport widths. Done means the nav links remain visible and their spacing stays constrained across the reported viewport sizes, including the proposed min(1.5dvw, 32px) behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100