gh-13747: Fixed space icons overflow being inaccessible (gh-14077)

src/zen/spaces/ZenSpaceIcons.mjs

@@ -15,12 +15,12 @@ class nsZenWorkspaceIcons extends MozXULElement {
 
     this.initDragAndDrop();
     this.addEventListener("mouseover", e => {
-      if (this.isReorderMode) {
+      if (e.shiftKey || this.isReorderMode) {
         return;
       }
       const target = e.target.closest("toolbarbutton[zen-workspace-id]");
       if (target) {
-        this.scrollLeft = target.offsetLeft - 10;
+        target.scrollIntoView({ behavior: "smooth", inline: "nearest" });
       }
     });
   }
@@ -178,7 +178,7 @@ class nsZenWorkspaceIcons extends MozXULElement {
       return;
     }
     buttons[selected].setAttribute("active", true);
-    this.scrollLeft = buttons[selected].offsetLeft - 10;
+    buttons[selected].scrollIntoView({ behavior: "smooth", inline: "nearest" });
     this.setAttribute("selected", selected);
   }
 

src/zen/spaces/zen-workspaces.css

@@ -20,7 +20,6 @@
     display: none !important;
   }
 
-  border-radius: var(--button-border-radius) !important;
   background: transparent;
   appearance: unset !important;
   height: fit-content;
@@ -41,6 +40,7 @@
     fill-opacity: 0.6;
     -moz-context-properties: fill-opacity, fill;
     fill: currentColor;
+    scroll-margin: 0 20px;
 
     & .zen-workspace-icon {
       pointer-events: none;
@@ -105,7 +105,7 @@
 
   &[icons-overflow] {
     gap: 0 !important;
-    justify-content: center;
+    justify-content: safe center;
 
     & toolbarbutton {
       margin: 0;