autohide tabs toolbar: Fix sidebar tabs z-index, background and layout

Expanded sidebar internal layout should stay "static", that is,
to not change when sidebar gets hovered.
This commit is contained in:
MrOtherGuy
2026-05-21 18:04:46 +03:00
parent 1f477a50cf
commit 64245da882
+6 -2
View File
@@ -12,13 +12,14 @@ See the above repository for updates as well as full license text. */
#sidebar-main{ #sidebar-main{
overflow: visible !important; overflow: visible !important;
max-width: var(--tab-collapsed-width) !important; max-width: var(--tab-collapsed-width) !important;
z-index: var(--browser-area-z-index-toolbox-while-animating); z-index: var(--browser-area-z-index-sidebar-expand-on-hover,var(--browser-area-z-index-toolbox-while-animating));
transition: z-index 0s linear var(--uc-tabs-hide-duration); transition: z-index 0s linear var(--uc-tabs-hide-duration);
background: inherit; background: inherit;
} }
sidebar-main{ sidebar-main{
--tab-pinned-horizontal-count: 5; /* This needs to match whatever is used in sidebar-main.css - currently 5 */ --tab-pinned-horizontal-count: 5; /* This needs to match whatever is used in sidebar-main.css - currently 5 */
background: inherit; --uc-sidebar-tabs-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
background-color: var(--toolbox-background-color,inherit);
overflow: hidden; overflow: hidden;
min-width: var(--tab-collapsed-width); min-width: var(--tab-collapsed-width);
transition: min-width var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay); transition: min-width var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay);
@@ -29,6 +30,9 @@ See the above repository for updates as well as full license text. */
border-inline-width: 0.01px 0; border-inline-width: 0.01px 0;
} }
} }
div.wrapper{
min-width: var(--uc-sidebar-tabs-width,initial);
}
:where(#navigator-toolbox[movingtab] + #browser > #sidebar-main) > sidebar-main[expanded], :where(#navigator-toolbox[movingtab] + #browser > #sidebar-main) > sidebar-main[expanded],
sidebar-main[expanded]:hover{ sidebar-main[expanded]:hover{
min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px); min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);