fix: Fixed missing space between update and media player, b=closes #11592, c=scripts, common, tabs, workspaces

scripts/json_with_comments.py

@@ -5,6 +5,7 @@
 import json
 from typing import Any
 
+
 class JSONWithCommentsDecoder(json.JSONDecoder):
   def __init__(self, **kw):
     super().__init__(**kw)

src/zen/common/styles/zen-single-components.css

@@ -261,6 +261,7 @@ body > #confetti {
 }
 
 #TabsToolbar {
+  gap: var(--zen-toolbox-padding);
   -moz-window-dragging: unset;
 }
 

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

@@ -439,7 +439,6 @@
   background: transparent;
   gap: 5px;
   align-items: center;
-  padding-top: var(--zen-element-separation);
 
   & > toolbarbutton:not(#zen-workspaces-button) {
     padding: 0 !important;

src/zen/workspaces/ZenWorkspaces.mjs

@@ -3140,7 +3140,7 @@ class nsZenWorkspaces extends nsZenMultiWindowFeature {
       return;
     }
     const maxButtonSize = 32; // IMPORTANT: This should match the CSS size of the icons
-    const minButtonSize = 15;
+    const minButtonSize = maxButtonSize / 2; // Minimum size for icons when space is limited
     const separation = 3; // Space between icons
 
     // Calculate the total width needed for all icons
@@ -3160,9 +3160,7 @@ class nsZenWorkspaces extends nsZenMultiWindowFeature {
 
     // Set the width of each icon to the maximum size they can fit on
     const widthPerButton = Math.max(
-      Math.floor(
-        (parent.clientWidth - separation * (parent.children.length - 1)) / parent.children.length
-      ),
+      (parent.clientWidth - separation * (parent.children.length - 1)) / parent.children.length,
       minButtonSize
     );
     for (const icon of parent.children) {

src/zen/workspaces/overflow-icons.inc.css

@@ -4,31 +4,40 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+&::after {
+  content: '';
+  position: absolute;
+  width: 4px;
+  border-radius: 99px;
+  height: 4px;
+  background: color-mix(
+    in srgb,
+    var(--zen-primary-color) 10%,
+    light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
+  );
+  left: 50%;
+  top: 50%;
+  filter: saturate(140%) brightness(110%) !important;
+  transform: translate(-50%, -50%);
+  transition: opacity 150ms ease-in-out;
+  opacity: 0;
+}
+
+& .zen-workspace-icon {
+  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
+  z-index: 2;
+  transform-origin: center;
+}
+
 &:not(:hover) {
   min-width: 10px;
 
   &::after {
-    content: '';
-    position: absolute;
-    width: 4px;
-    border-radius: 99px;
-    height: 4px;
-    background: color-mix(
-      in srgb,
-      var(--zen-primary-color) 10%,
-      light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
-    );
-    left: 50%;
-    top: 50%;
-    filter: saturate(140%) brightness(110%) !important;
-    transform: translate(-50%, -50%);
+    opacity: 1;
   }
 
   & .zen-workspace-icon {
-    display: none;
+    opacity: 0;
+    transform: scale(0);
   }
 }
-
-&:hover {
-  width: 20px !important;
-}

src/zen/workspaces/zen-workspaces.css

@@ -94,7 +94,7 @@
 
   &[icons-overflow] {
     gap: 0 !important;
-    justify-content: space-between;
+    justify-content: center;
 
     & toolbarbutton {
       margin: 0;
@@ -108,7 +108,7 @@
     }
 
     &:has(toolbarbutton:hover) toolbarbutton[active='true']:not([dragged='true']) {
-%include overflow-icons.inc.css 
+%include overflow-icons.inc.css
     }
   }
 }