Navbar spacing is unconstrained, leading to spacing issues at larger resolutions

Open Beginner friendly
#3,554 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css
Domain
frontend

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.

Description

aesthetic

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...

Image Image

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):

Image Image
Dominant language
JavaScript
Stars
616
Forks
463
Avg merge
2d 8h
Merged PRs (30d)
17

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 matrix-org/matrix.org

All issues in matrix-org/matrix.org

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.