diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs
index ca1aaecd3..a20dafdef 100644
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -35,7 +35,7 @@ var gZenUIManager = {
updateTabsToolbar() {
// Set tabs max-height to the "toolbar-items" height
- const tabs = document.getElementById('zen-browser-tabs-wrapper');
+ const tabs = this.tabsWrapper;
// Remove tabs so we can accurately calculate the height
// without them affecting the height of the toolbar
for (const tab of gBrowser.tabs) {
@@ -414,7 +414,10 @@ var gZenVerticalTabsManager = {
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
// on purpose, we set the orient to horizontal, because the arrowScrollbox is vertical
- gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute('orient', (isVerticalTabs && ZenWorkspaces.workspaceEnabled) ? 'horizontal' : 'vertical');
+ gBrowser.tabContainer.arrowScrollbox.scrollbox.setAttribute(
+ 'orient',
+ isVerticalTabs && ZenWorkspaces.workspaceEnabled ? 'horizontal' : 'vertical'
+ );
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
if (isRightSide) {
diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
index bc2ef52de..0419daa0c 100644
--- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
+++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch
@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde703a90ee8 100644
+index a0a382643a2f74b6d789f3641ef300eed202d5e9..fd60aceee18e22d40c7d86506408803e3f4ffd45 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -40,17 +40,18 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde7
+
+
+
++
# If the name (tabbrowser-arrowscrollbox) or structure of this changes
# significantly, there is an optimization in
-@@ -57,7 +60,7 @@
+@@ -57,7 +61,7 @@
# the current structure that we may want to revisit.
@@ -59,15 +60,16 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde7
-@@ -75,6 +78,7 @@
+@@ -75,6 +79,8 @@
tooltip="dynamic-shortcut-tooltip"
data-l10n-id="tabs-toolbar-new-tab"/>
++
+
@@ -83,7 +85,7 @@ index a0a382643a2f74b6d789f3641ef300eed202d5e9..340475da315e67b2dd4f93567547cde7
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index a5ca41b3f..5efc7354f 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -368,9 +368,12 @@
#zen-browser-tabs-wrapper {
min-height: fit-content;
overflow-y: auto;
- overflow-x: clip !important; /* might break custom css with new design, so let's force it */
height: 100%;
scrollbar-width: thin;
+}
+
+#zen-browser-tabs-container {
+ overflow-x: clip !important; /* might break custom css with new design, so let's force it */
position: relative;
}
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 01da4272b..e622626b8 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1464,13 +1464,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
for (const container of document.querySelectorAll(selector)) {
container.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
container.style.opacity = offsetPixels ? 1 : !newTransform;
- }
- if (!justMove) {
- const pinnedContainerId = '#vertical-pinned-tabs-container ';
- const arrowScrollboxId = '#tabbrowser-arrowscrollbox ';
- const pinnedContainer = document.querySelector(pinnedContainerId + selector);
- const arrowScrollbox = document.querySelector(arrowScrollboxId + selector);
- this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer);
+ if (!offsetPixels && !container.hasAttribute('active')) {
+ container.style.position = 'fixed';
+ } else {
+ container.style.removeProperty('position');
+ }
}
}
}
@@ -1513,6 +1511,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const newTransform = `translateX(${offset}%)`;
const isCurrent = offset === 0;
if (shouldAnimate) {
+ element.style.removeProperty('position');
if (isCurrent) {
element.style.opacity = 1;
}
@@ -1534,7 +1533,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
if (offset === 0) {
element.setAttribute('active', 'true');
- if (tabToSelect) {
+ if (tabToSelect != gBrowser.selectedTab) {
gBrowser.selectedTab = tabToSelect;
tabToSelect._visuallySelected = false;
}
@@ -1647,7 +1646,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
gZenThemePicker.onWorkspaceChange(window);
+ document.getElementById('zen-browser-tabs-wrapper').style.scrollbarWidth = 'none';
await this._animateTabs(window, !onInit && !this._animatingChange, tabToSelect);
+ await this._organizeWorkspaceStripLocations(window, true);
+ document.getElementById('zen-browser-tabs-wrapper').style.scrollbarWidth = '';
// Notify listeners
if (this._changeListeners?.length) {