fix(nav-bar): adjust overflow and visibility of buttons in navigator toolbox#153
fix(nav-bar): adjust overflow and visibility of buttons in navigator toolbox#153ozanyetkin wants to merge 2 commits intocascadefox:mainfrom
Conversation
There was a problem hiding this comment.
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: hiddento#nav-barin the ≥1000px responsive layout. - Hides
#unified-extensions-buttonand#sidebar-buttonwhen#navigator-toolboxis not:focus-within.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| #navigator-toolbox:not(:focus-within) #unified-extensions-button, | ||
| #navigator-toolbox:not(:focus-within) #sidebar-button { | ||
| display: none !important; | ||
| } |
There was a problem hiding this comment.
thanks for the pr!
unfortunately this also hides these buttons for users without min-width set to zero, would this be possible to do with media/container queries?
there are also small lines that appear when the urlbar is minimized, so ideally it should be hidden altogether when it isnt active
There was a problem hiding this comment.
Thank you for the feedback!
You are right, sorry for the oversight since I only tested with min-width set to zero. I have implemented it by using a container query, which should work fine now.
Let me know if any further changes are needed!
Introduces a container query to adjust toolbar styles based on the maximum width. Hides specific buttons and removes borders, shadows, and padding for a cleaner UI in constrained layouts. Enhances responsiveness and visual consistency.
| } | ||
|
|
||
| @container (max-width: 1px) { | ||
| #nav-bar { |
There was a problem hiding this comment.
what do these lines do? the buttons are hiding properly now but it's not hiding the squashed url bar for me. thanks for your work!
There was a problem hiding this comment.
They apply styling to the navigation bar when the container width is 1px or less.
I have tried some methods to hide the squashed URL bar completely, but it prevents the URL bar from appearing when "Ctrl/Cmd + L" is used, making it non-functional. Not sure what can be done to hide the squashed URL bar without breaking its functionality.
I'll keep you posted if I find a workaround that maintains full functionality.
2 participants
Fixes #148