diff --git a/src/zen/spaces/ZenSpaceIcons.mjs b/src/zen/spaces/ZenSpaceIcons.mjs index a15bcc083..b8bfb6744 100644 --- a/src/zen/spaces/ZenSpaceIcons.mjs +++ b/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); } diff --git a/src/zen/spaces/zen-workspaces.css b/src/zen/spaces/zen-workspaces.css index d9fa560af..f5d7e91a9 100644 --- a/src/zen/spaces/zen-workspaces.css +++ b/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;