Refactor compact mode styles and improve vertical tab button visibility

zen-browser · Jan 25, 2025 · d996db3 · d996db3
1 parent c0eeab9
commit d996db3
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 10 deletions.
diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -52,7 +52,7 @@
         content/browser/zen-styles/zen-panels/print.css         (content/zen-styles/zen-panels/print.css)
         content/browser/zen-styles/zen-panels/welcome.css       (content/zen-styles/zen-panels/welcome.css)
 
-        content/browser/zen-styles/zen-compact-mode.css         (content/zen-styles/zen-compact-mode.css)
+*       content/browser/zen-styles/zen-compact-mode.css         (content/zen-styles/zen-compact-mode.css)
 
         # Images
         content/browser/zen-images/gradient.png                 (content/zen-images/gradient.png)

diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -6,13 +6,7 @@
 /* All overrides for compact mode go here */
 
 :root[zen-compact-mode='true']:not([customizing]):not([inDOMFullscreen='true']) {
-  #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
-    max-height: 0 !important;
-    min-height: 0 !important;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-  }
+%include zen-tabs/vertical-tabs-topbuttons-fix.css
 
   @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') or (-moz-bool-pref: 'zen.view.use-single-toolbar') {
     #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbuttons-fix.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbuttons-fix.css
@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-& #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
+& #zen-sidebar-top-buttons:not(:has(toolbarbutton, toolbaritem)) {
   max-height: 0 !important;
   min-height: 0 !important;
   opacity: 0;

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
@@ -559,7 +559,6 @@
     justify-content: center;
     max-height: unset !important;
     height: fit-content !important;
-    margin-bottom: var(--zen-element-separation);
   }
   & #titlebar {
     display: grid;