asyncapi / asyncapi/website

[DESIGN]: Header nav links and GitHub button wrap on medium screen sizes

Open Beginner friendly
#4,898 14 comments 0 reactions 0 assignees View on GitHub
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

Image

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.