fix: Fixed crashes with mods and default lightness will be 50%, b=no-bug, c=mods, workspaces

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -840,11 +840,9 @@
       const relativeY = pixelY - rect.top;
 
       if (!clickedDot && this.dots.length < 1) {
-        if (this.dots.length === 0) {
-          this.spawnDot({ x: relativeX, y: relativeY }, true);
-        } else {
-          this.spawnDot({ x: relativeX, y: relativeY });
-        }
+        this.spawnDot({ x: relativeX, y: relativeY }, this.dots.length === 0);
+        // Set brightness to 50%
+        this.#currentLightness = 50;
 
         this.updateCurrentWorkspace(true);
       } else if (!clickedDot && existingPrimaryDot) {

src/zen/workspaces/ZenWorkspaceIcons.mjs

@@ -16,6 +16,15 @@
       window.addEventListener('ZenWorkspacesUIUpdate', this, true);
 
       this.initDragAndDrop();
+      this.addEventListener('mouseover', (e) => {
+        if (this.isReorderMode) {
+          return;
+        }
+        const target = e.target.closest('toolbarbutton[zen-workspace-id]');
+        if (target) {
+          this.scrollLeft = target.offsetLeft - 10;
+        }
+      });
     }
 
     initDragAndDrop() {
@@ -118,6 +127,7 @@
       } else {
         this.removeAttribute('dont-show');
       }
+      gZenWorkspaces.onWindowResize();
     }
 
     on_command(event) {

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2872,30 +2872,46 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (!parent || this._processingResize) {
       return;
     }
-    this._processingResize = true;
-    // Once we are overflowing, we align the buttons to always stay inside the container,
-    // meaning we need to remove the overflow attribute to reset the width
-    parent.removeAttribute('icons-overflow');
-    requestAnimationFrame(() => {
-      const overflow = parent.scrollWidth > parent.clientWidth;
-      parent.toggleAttribute('icons-overflow', overflow);
-      // The maximum width a button has when it overflows based on the number of buttons
-      const numButtons = parent.children.length + 1; // +1 to exclude the active button
-      const maxWidth = 100 / numButtons;
-      parent.style.setProperty('--zen-overflowed-workspace-button-width', `${maxWidth}%`);
-      this._processingResize = false;
+    if (!gZenPinnedTabManager.expandedSidebarMode) {
+      for (const icon of parent.children) {
+        if (icon.tagName === 'toolbarbutton') {
+          icon.style.width = ''; // Reset to default size when in expanded mode
+        }
+      }
+      parent.removeAttribute('icons-overflow');
+      return;
+    }
+    const maxButtonSize = 30; // IMPORTANT: This should match the CSS size of the icons
+    const minButtonSize = 15;
+    const separation = 3; // Space between icons
 
-      // Scroll to the active workspace button if it's not visible
-      const activeButton = parent.querySelector('.zen-workspace-button.active');
-      if (!activeButton) {
-        return;
+    // Calculate the total width needed for all icons
+    const totalWidth = Array.from(parent.children).reduce((width, icon) => {
+      if (icon.tagName === 'toolbarbutton') {
+        return width + minButtonSize + separation;
       }
-      const parentRect = parent.getBoundingClientRect();
-      const activeRect = activeButton.getBoundingClientRect();
-      if (activeRect.left < parentRect.left || activeRect.right > parentRect.right) {
-        parent.scrollLeft = activeButton.offsetLeft;
+      return width;
+    }, 0);
+
+    // Check if the total width exceeds the parent's width
+    if (totalWidth > parent.clientWidth) {
+      parent.setAttribute('icons-overflow', 'true');
+    } else {
+      parent.removeAttribute('icons-overflow');
+    }
+
+    // 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
+      ),
+      minButtonSize
+    );
+    for (const icon of parent.children) {
+      if (icon.tagName === 'toolbarbutton') {
+        icon.style.width = `${Math.min(widthPerButton, maxButtonSize)}px`;
       }
-    });
+    }
   }
 
   fixTabInsertLocation(tab) {

src/zen/workspaces/create-workspace-form.css

@@ -95,6 +95,7 @@ zen-workspace-creation {
           --input-bgcolor: transparent;
           padding: 0 !important;
           width: 100%;
+          outline: none;
         }
       }
 

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

@@ -5,7 +5,7 @@
  */
 
 &:not(:hover) {
-  width: min(var(--zen-overflowed-workspace-button-width), 25px);
+  width: min(var(--zen-overflowed-workspace-button-width,10px), 25px) !important;
   min-width: 10px;
 
   &::after {
@@ -29,3 +29,7 @@
     display: none;
   }
 }
+
+&:hover {
+  width: 20px !important;
+}

src/zen/workspaces/zen-workspaces.css

@@ -11,8 +11,8 @@
   align-items: center;
   display: flex;
   font-size: x-small;
-  padding: 0 3px;
-  margin: 0;
+  margin: 0 3px;
+  padding: 0;
   appearance: auto;
 
   position: relative;
@@ -34,7 +34,7 @@
 
   & toolbarbutton {
     margin: 0;
-    width: 30px;
+   max-width: 30px;
     height: 30px;
     display: flex;
     justify-content: center;
@@ -84,9 +84,11 @@
 
   &[icons-overflow] {
     gap: 0 !important;
+    justify-content: space-between;
 
     & toolbarbutton {
       margin: 0;
+  background: transparent;
     }
 
     /* Inlcude separately since ther'es a bug in the