Navbar layout overflow on initial load and top scroll (Logo expansion causes overflow on MacBook 14")

[k61b]

Description

The navigation bar does not fit the screen correctly when the website is first loaded on my 14-inch MacBook. The logo appears to be fully expanded, pushing the navbar elements out of view or breaking the alignment (overlapping with buttons).

When I scroll down, the navbar adjusts (shrinks), and the layout fixes itself. However, when I scroll back to the very top, the logo expands again, and the layout breaks once more.

Expected behavior:
The navbar and logo should fit within the container/screen width correctly on initial load and remain responsive without overflowing, even when at the very top of the page.

Reproduction

1. Open the project website (cap.so) on a MacBook 14-inch (or a similar viewport size).
2. Observe the navbar layout immediately upon loading (logo is expanded, layout is broken).
3. Scroll down the page (observe that the layout fixes itself as the UI shrinks).
4. Scroll back to the very top of the page.
5. The logo expands, and the layout breaks again.

Additional Context

• Cap version: Website (cap.so)
• Operating system: macOS
• Device: MacBook Pro 14-inch
• Browser: Firefox

Note: As seen in the attached screenshot, the navbar elements (especially the GitHub and Login buttons) are crowded due to the expanded logo width on this viewport size.

[linear]

CAP-601