From 3e0177e02567d16a5814bcd266c56b43e87e3ee2 Mon Sep 17 00:00:00 2001 From: Ozan Yetkin Date: Tue, 3 Feb 2026 11:13:43 +0300 Subject: [PATCH 1/2] fix(nav-bar): adjust overflow and visibility of buttons in navigator toolbox --- chrome/includes/cascade-responsive.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/chrome/includes/cascade-responsive.css b/chrome/includes/cascade-responsive.css index 78e23c1..d93b425 100644 --- a/chrome/includes/cascade-responsive.css +++ b/chrome/includes/cascade-responsive.css @@ -8,6 +8,7 @@ #nav-bar { order: var(--uc-urlbar-position); width: var(--uc-urlbar-min-width); + overflow: hidden; &.browser-titlebar { width: 100%; } @@ -31,4 +32,9 @@ #navigator-toolbox:focus-within #titlebar { width: calc(100vw - var(--uc-urlbar-max-width) - 1px); } + + #navigator-toolbox:not(:focus-within) #unified-extensions-button, + #navigator-toolbox:not(:focus-within) #sidebar-button { + display: none !important; + } } From 2b56026cb0352b9949a09475010beaa6ab93d682 Mon Sep 17 00:00:00 2001 From: Ozan Yetkin Date: Fri, 6 Feb 2026 10:36:00 +0300 Subject: [PATCH 2/2] Adds container query for adaptive toolbar styling 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. --- chrome/includes/cascade-responsive.css | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/chrome/includes/cascade-responsive.css b/chrome/includes/cascade-responsive.css index d93b425..cb3fbb4 100644 --- a/chrome/includes/cascade-responsive.css +++ b/chrome/includes/cascade-responsive.css @@ -9,6 +9,7 @@ order: var(--uc-urlbar-position); width: var(--uc-urlbar-min-width); overflow: hidden; + container-type: inline-size; &.browser-titlebar { width: 100%; } @@ -33,8 +34,17 @@ width: calc(100vw - var(--uc-urlbar-max-width) - 1px); } - #navigator-toolbox:not(:focus-within) #unified-extensions-button, - #navigator-toolbox:not(:focus-within) #sidebar-button { +} + +@container (max-width: 1px) { + #nav-bar { + border: none !important; + box-shadow: none !important; + padding: 0 !important; + } + + #unified-extensions-button, + #sidebar-button { display: none !important; } }