Bug: Header navigation layout breaks on small viewport widths

[oilman-awesome]

Describe the bug

On smaller screen sizes, the header navigation on base/web does not consistently adapt to the available viewport width. This can cause navigation items to overlap, wrap incorrectly, or become partially inaccessible

Steps

1. Open the Base website on a desktop browser.
2. Gradually resize the window width to a smaller size (but not fully mobile).
3. Observe the header navigation layout.
4. Notice overlapping or misaligned navigation elements.

Expected behavior

• Header navigation should remain readable and accessible at all supported viewport sizes.
• Navigation elements should not overlap or clip.
• Responsive breakpoints should transition smoothly.

Environment

• Device: Desktop
• OS: macOS 14.x
• Browser: Chrome
• Browser Version: 120+
• Screen Width: ~900–1000px (resized desktop window)