Refactor vertical tab management and adjust CSS for improved layout and styling

src/browser/base/content/ZenUIManager.mjs

@@ -210,10 +210,10 @@ var gZenVerticalTabsManager = {
     const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
     const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') || !isVerticalTabs;
     const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
-    const isSingleToolbar = Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) || !isVerticalTabs;
+    const isSingleToolbar = (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs;
     const titlebar = document.getElementById('titlebar');
 
-    gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
+ // gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
     gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
 
     const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
@@ -355,4 +355,4 @@ var gZenVerticalTabsManager = {
     const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
     Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);
   },
-};
+};

src/browser/base/content/zen-styles/zen-tabs/horizontal-tabs.css

@@ -19,14 +19,17 @@
       -webkit-box-orient: horizontal;
       -webkit-box-pack: start;
       max-width: 10000px !important;
+
+      --tabstrip-min-height: calc(var(--tab-min-height) - 4 * var(--tab-block-margin));
+      --tab-min-height: 10px !important;
   }
 
   #vertical-pinned-tabs-container-separator {
       display: none !important;
   }
 
-  #zen-essentials-container, 
-  #vertical-pinned-tabs-container, 
+  #zen-essentials-container,
+  #vertical-pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
       -webkit-box-flex: 1;
   }
@@ -41,12 +44,13 @@
   }
   #navigator-toolbox {
       flex-direction: row !important;
+      align-items: center;
   }
 
   #titlebar {
       flex-direction: row !important;
       width: 100%;
-      height: 40px !important;
+      height: 36px !important;
   }
 
   #zen-essentials-container {
@@ -71,9 +75,7 @@
   }
 
   .tabbrowser-tab[zen-glance-tab="true"] {
-      .tab-content {
-      }
-      
+
       .tab-label-container {
           display: none !important;
           width: 0px !important;
@@ -110,20 +112,24 @@
       container-name: tab-container;
       container-type: normal;
       max-width: 36px !important;
-      flex: 1 1 36px !important; 
+      flex: 1 1 36px !important;
   }
   #vertical-pinned-tabs-container {
       container-name: tab-container;
       container-type: normal;
       max-width: 36px !important;
       min-width: 36px !important;
-      flex: 1 1 36px !important; 
+      flex: 1 1 36px !important;
   }
 
   #vertical-pinned-tabs-container .tab-close-button {
       display: none !important;
   }
 
+  #vertical-pinned-tabs-container .tab-reset-button {
+    display: none !important;
+  }
+
   #vertical-pinned-tabs-container .tab-label-container {
       display: none !important;
   }
@@ -133,16 +139,21 @@
   }
 
   .tabbrowser-tab {
-      container-name: tab-container;
-      container-type: normal;
-      max-width: 200px !important;
-      min-width: 36px !important;
-      flex: 1 1 150px !important; 
+    container-name: tab-container;
+    container-type: normal;
+    min-width: 40px !important;
+    flex: 1 1 150px !important;
+    width: -moz-available;
+
+    &:is(:hover, [visuallyselected]) .tab-close-button {
+      display: block;
+      --tab-inline-padding: 0; /* Avoid weird padding */
+      margin-inline-end: 0 !important;
+    }
   }
 
   .tabbrowser-tab[selected] {
-      flex: 2 1 150px !important; 
-      min-width: 32px !important;
+    flex: 2 0 150px !important;
   }
 
   @container tab-container (max-width: 80px) {
@@ -199,21 +210,6 @@
       background: hsl(255, 10%, 100%);
   }
 
-  slot {
-      flex-direction: row !important;
-  }
-
-  box.scrollbox-clip scrollbox slot {
-      display: flex !important;
-      width: 100% !important;
-      overflow: hidden !important;
-  }
-
-  .menupopup-arrowscrollbox > slot:nth-child(1) {
-      display: flex;
-      flex-direction: column !important;
-  }
-
   /* Other UI Elements */
   #zen-current-workspace-indicator {
       display: none !important;
@@ -251,9 +247,8 @@
       min-width: 390px !important;
   }
 
-
-  #zen-essentials-container:not(:empty), 
-  #vertical-pinned-tabs-container:not(:empty), 
+  #zen-essentials-container:not(:empty),
+  #vertical-pinned-tabs-container:not(:empty),
   #tabbrowser-arrowscrollbox {
       -webkit-box-flex: 1;
       min-width: min-content;
@@ -289,6 +284,11 @@
       visibility: collapse !important;
   }
 
+  #nav-bar {
+    width: unset !important;
+    min-width: 500px !important;
+  }
+
   #tabbrowser-arrowscrollbox-periphery {
     margin: 0 !important;
   }
@@ -306,7 +306,7 @@
       height: 3px !important;
   }
 
-  .tabbrowser-tab[zen-glance-tab="true"] { 
+  .tabbrowser-tab[zen-glance-tab="true"] {
       flex-basis: fit-content !important;
       max-width: 36px !important;
   }
@@ -324,7 +324,7 @@
       -webkit-box-flex: 0 !important;
       min-width: min-content;
       width: auto !important;
-      
+
       .toolbarbutton-text {
           display: none !important;
       }