fix: Fixed TODO in color picker and fixed spacing issues on multiple toolbars, b=no-bug, c=glance, tabs, workspaces

src/zen/glance/ZenGlanceManager.mjs

@@ -209,7 +209,7 @@
                 opacity: 1,
               },
               {
-                duration: 0.5,
+                duration: 0.4,
                 type: 'spring',
                 bounce: 0.3,
               }

src/zen/glance/zen-glance.css

@@ -27,7 +27,7 @@
     height: 32px;
     background: color-mix(
       in srgb,
-      light-dark(rgb(24, 24, 24), rgb(231, 231, 231)) 90%,
+      light-dark(rgb(24, 24, 24), rgb(231, 231, 231)) 96%,
       var(--zen-primary-color)
     );
     transition:

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -116,43 +116,42 @@
    Single Toolbar Mode - Further Layout Adjustments
    ========================================================================== */
 :root[zen-single-toolbar='true'] {
-  /* Make URL bar container take available width */
   #urlbar-container {
     width: -moz-available !important;
   }
 
-  /* Center identity icons vertically */
   #identity-icon-box,
   #identity-permission-box {
     margin-top: auto;
     margin-bottom: auto;
-    padding: 6px !important; /* Add padding */
+    padding: 6px !important;
   }
 
-  /* Adjust height for floating URL bar */
   & #urlbar-container[breakout='true']:has([zen-floating-urlbar='true']) {
     --urlbar-container-height: 36px !important;
     --urlbar-height: 38px !important;
   }
 
   & #nav-bar {
-    /* Hide flexible spaces */
     & toolbarspring {
       display: none;
     }
   }
 
-  /* Add vertical margins to the top sidebar buttons area */
   & #zen-sidebar-top-buttons {
     margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0;
   }
 
-  /* Remove padding from PanelUI button */
   & #PanelUI-menu-button {
     padding: 0 !important;
   }
 }
 
+:root:not([zen-single-toolbar='true']) #tabbrowser-tabs {
+  /* Make up for the margin on tab's background */
+  margin-top: -2px;
+}
+
 /* ==========================================================================
    Pinned Tabs Separator
    ========================================================================== */
@@ -807,29 +806,26 @@
 
   & #titlebar {
     display: grid;
-    grid-template-rows: auto 1fr; /* Allow content below button box */
+    grid-template-rows: auto 1fr;
     overflow: clip;
   }
 
-  /* Style top buttons customization target */
   & #zen-sidebar-top-buttons-customization-target {
-    flex-direction: column; /* Stack items vertically */
+    flex-direction: column;
     padding-top: var(--zen-element-separation);
   }
 
-  /* Style bottom buttons area when collapsed */
   & #zen-sidebar-foot-buttons {
     display: flex;
-    flex-direction: column; /* Stack vertically */
+    flex-direction: column;
     padding-top: var(--zen-element-separation);
-    align-items: center; /* Center horizontally */
+    align-items: center;
   }
 
-  /* Style new tab button area */
   & #tabbrowser-arrowscrollbox-periphery {
     & > toolbarbutton {
-      margin-left: auto !important; /* Center the button */
-      margin-right: auto !important; /* Center the button */
+      margin-left: auto !important;
+      margin-right: auto !important;
 
       & image {
         width: 100%;
@@ -847,38 +843,31 @@
     display: none !important;
   }
 
-  /* Adjust customization target padding and separator */
   & #TabsToolbar-customization-target {
     padding-bottom: var(--zen-toolbox-padding);
     &::after {
-      bottom: -1px !important; /* Position separator correctly */
+      bottom: -1px !important;
     }
   }
 
-  /* Style tabs container when collapsed */
   & #tabbrowser-tabs {
-    margin-top: -2px; /* Minor visual adjustment */
-
     & .tabbrowser-tab {
-      margin: 0 auto; /* Center tabs horizontally */
+      margin: 0 auto;
 
-      /* Center background */
       & .tab-background {
         margin-inline: auto !important;
       }
 
-      /* Hide reset buttons */
       & .tab-reset-button,
       & .tab-reset-pin-button {
         display: none !important;
       }
 
-      /* Center tab content and hide label */
       & .tab-content {
         display: flex;
         align-content: center;
         justify-content: center;
-        padding: 0 !important; /* Remove padding */
+        padding: 0 !important;
 
         & .tab-label-container {
           display: none !important; /* Hide label */
@@ -1308,7 +1297,7 @@
 
   position: absolute;
 
-  &:not(:empty) {
+  :root[zen-single-toolbar='true'] &:not(:empty) {
     padding-top: 6px;
   }
 

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -516,7 +516,7 @@
         this.dots.push({
           ID: id,
           element: dot,
-          position: { x: null, y: null }, // at some point possition should instead be stored as percentege just so that the size of the color picker does not matter.
+          position: { x, y },
           type: color.type,
           lightness: color.lightness,
         });

src/zen/workspaces/zen-workspaces.css

@@ -74,6 +74,10 @@
     & label {
       margin: 0 !important;
     }
+
+    :root:not([zen-sidebar-expanded='true']) & {
+      min-width: 36px;
+    }
   }
 
   &[reorder-mode='true'] toolbarbutton:not([dragged='true']) {