fix(nav-bar): adjust overflow and visibility of buttons in navigator toolbox

[ozanyetkin]

Fixes #148

[Copilot]

Pull request overview

Adjusts the responsive “oneline” navigator toolbox layout to prevent nav-bar content overflow and conditionally hide specific toolbar buttons when the toolbox isn’t active.

Changes:

• Adds overflow: hidden to #nav-bar in the ≥1000px responsive layout.
• Hides #unified-extensions-button and #sidebar-button when #navigator-toolbox is not :focus-within.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

overflow: hidden on #nav-bar will clip any UI that overflows the navbar’s box (notably the URL bar autocomplete/results panel and other popup-like content rendered as descendants of the navbar). This can make the address bar dropdown appear cut off or not visible. Consider constraining only the horizontal overflow (or applying clipping to a more specific child container that only wraps the toolbar buttons) so the URL bar panel can still overflow vertically.

Suggested change

	overflow: hidden;
	overflow-x: hidden;
	overflow-y: visible;

[Copilot]

These rules hide #unified-extensions-button and #sidebar-button whenever focus is outside #navigator-toolbox (which is the common state while browsing). That makes the buttons impossible to access/click with the mouse unless the user first focuses something in the toolbox (e.g., the urlbar). If the intent is to hide them only in the “collapsed” state, consider also revealing them on :hover (or gating on a more explicit “collapsed” condition) so they remain discoverable and clickable.

Suggested change

	#navigator-toolbox:not(:focus-within) #unified-extensions-button,
	#navigator-toolbox:not(:focus-within) #sidebar-button {
	#navigator-toolbox:not(:focus-within):not(:hover) #unified-extensions-button,
	#navigator-toolbox:not(:focus-within):not(:hover) #sidebar-button {