From 33ac29f2699f19afaf5721477e362b6ab811fbf5 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sun, 10 Nov 2024 18:25:09 +0100
Subject: [PATCH] Add zen-compact-mode-ignore class to sidebar button for
 improved styling in compact mode

---
 src/browser/base/content/ZenCustomizableUI.sys.mjs          | 2 +-
 src/browser/base/content/zen-styles/zen-compact-mode.css    | 2 +-
 .../base/content/zen-styles/zen-tabs/vertical-tabs.css      | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/browser/base/content/ZenCustomizableUI.sys.mjs b/src/browser/base/content/ZenCustomizableUI.sys.mjs
index a5933ae6a..782a13df7 100644
--- a/src/browser/base/content/ZenCustomizableUI.sys.mjs
+++ b/src/browser/base/content/ZenCustomizableUI.sys.mjs
@@ -46,7 +46,7 @@ export var ZenCustomizableUI = new (class {
         mode="icons">
         <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
           <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
-          <toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
+          <toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
         </hbox>
       </toolbar>
     `);
diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css
index f53a44f49..ee54b4d9f 100644
--- a/src/browser/base/content/zen-styles/zen-compact-mode.css
+++ b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -90,7 +90,7 @@
       #navigator-toolbox[movingtab],
       #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
       #navigator-toolbox:has(.tabbrowser-tab:active),
-      #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
+      #navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) {
         opacity: 1;
 
         transform: translateX(calc(100% - var(--zen-element-separation)));
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 95dc13775..dcb5fbf01 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -211,7 +211,7 @@
       #navigator-toolbox[zen-user-hover='true'][movingtab],
       #navigator-toolbox[zen-user-hover='true'][flash-popup],
       #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
-      #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
+      #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)),
       #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
     ) {
     --zen-toolbox-min-width: fit-content;
@@ -377,7 +377,7 @@
           #navigator-toolbox[zen-user-hover='true'][movingtab],
           #navigator-toolbox[zen-user-hover='true'][flash-popup],
           #navigator-toolbox[zen-user-hover='true'][has-popup-menu],
-          #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
+          #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)),
           #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
         )
     ) {
@@ -607,7 +607,7 @@
     #navigator-toolbox[flash-popup],
     #navigator-toolbox[has-popup-menu],
     #navigator-toolbox:has(.tabbrowser-tab:active),
-    #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
+    #navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) {
       --zen-toolbox-max-width: 45px;
       max-width: var(--zen-toolbox-max-width) !important;
       min-width: var(--zen-toolbox-max-width) !important;