[DESIGN]: Header nav links and GitHub button wrap on medium screen sizes
- Dominant language
- TypeScript
- Stars
- 716
- Forks
- 1.2k
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 35
Description
### Describe the Issue
On medium screen widths (approximately 1020px–1150px), the header navigation links and the GitHub button text wrap onto multiple lines. This causes the header layout to look broken and visually inconsistent.
### Expected Outcome
The header navigation links and the GitHub button text should remain on a single line and not wrap when the screen width is between 1020px and 1150px.
### Screenshots
### Steps to Reproduce
- Go to https://www.asyncapi.com/en
- Resize the browser window to a width between 1020px and 1150px
- Observe that:
- Header navigation links wrap onto two lines
- The GitHub button text wraps onto three lines
### Browser/Device
OS: Ubuntu
Browsers: Chrome, Firefox
### Additional Notes
none
### Check Before Submitting
- [x] I have looked for similar issues to avoid duplicates.
- [x] I have reviewed the [Contributing Guidelines](https://github.com/asyncapi/.github/blob/master/CONTRIBUTING.md).
### Would you like to help fix this issue? (Not required, but appreciated!)
- [x] Yes, I am interested in contributing to the fix.
- [ ] No, I am just reporting the issue.
Contributor guide
Research direction
Open https://www.asyncapi.com/en and inspect the header navigation and GitHub button styles at 1020px–1150px in Chrome or Firefox. Trace the header entry point and its responsive styling, then verify that navigation links and button text stay on one line across the reported width range.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, tailwindcss, typescript
- Domain
- design, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 66/100