[BUG] Navbar inconsistent between desktop and tablet widths (GitHub button overflow)

[Nagmani001]

Describe the bug.

The GitHub button in the navbar overflows and breaks the layout on mid-sized screens (around 1032px width). The UI remains fine on larger and smaller breakpoints, but this range causes the button to wrap and misalign the navbar items.

Expected behavior

The navbar layout should remain consistent and visually aligned across all screen sizes. The GitHub button should stay on the same row as the other navbar items without wrapping, overflowing, or shifting the layout.

Screenshots

How to Reproduce

1. Open the website in a desktop browser.
2. Resize the browser window width gradually from large to small.
3. When the width reaches around 1032px, observe the navbar.
4. Notice that the GitHub button wraps/breaks the layout before the mobile hamburger menu appears.

🖥️ Device Information [optional]

• Operating System (OS): Ubuntu 24.04.3
• Browser: Brave
• Browser Version: 142.1.84.139

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[namanjain24-sudo]

can i work on this issue ?

[Nagmani001]

@namanjain24-sudo I've already worked on this issue and have an active PR.

[Sam-61s]

Hi @Nagmani001, thanks for working on this issue and opening the PR 🙌

I noticed that the current PR is failing a few checks. To help move this forward, I’ve opened #4767 with a fix that addresses the same issue while passing the tests.

[princerajpoot20]

Everyone please refrain from raising the PR before the issue is approved.

@Nagmani001, can you please simply share the design and how it will look on mid-size devices?
Also, please put some effort into testing your changes as well. Have you tried testing the changes in your PR #4649?
I did it on your PR, and it does not look good to me. Please have a look at the screenshot

[princerajpoot20]

I noticed that the current PR is failing a few checks. To help move this forward, I’ve opened #4767

@Sam-61s Don’t you think that instead of raising multiple PRs, it would make more sense if you could help @Nagmani001 in analyzing the failing CI and maybe help in fixing it? I guess that would make more sense.

[Sam-61s]

Hi @princerajpoot20, sorry about that and thanks for the feedback.
From now on, if I notice a PR failing checks,tests or needs improvement, I’ll try to help the contributor analyze and improve their existing PR instead of creating a new one for the same issue. Again sorry about creating a new PR.