From 68fc9fb6357d66c7d41282b46bcbc49d8d15c76d Mon Sep 17 00:00:00 2001
From: "Mr. M" <mr.m@tuta.com>
Date: Sat, 26 Apr 2025 12:24:19 +0200
Subject: [PATCH] fix: Weird tab sizing when switching workspaces on twilight,
 b=(no-bug), c=workspaces

---
 src/zen/workspaces/ZenWorkspaces.mjs | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs
index 535e6a0b..c734ad46 100644
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -281,13 +281,13 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       if (element.classList.contains('tabbrowser-tab')) {
         continue;
       }
-      this._pinnedTabsResizeObserver.observe(element);
+      this._pinnedTabsResizeObserver.observe(element, { box: 'border-box' });
     }
     for (let element of document.getElementById('zen-essentials-wrapper').children) {
       if (element.classList.contains('tabbrowser-tab')) {
         continue;
       }
-      this._pinnedTabsResizeObserver.observe(element);
+      this._pinnedTabsResizeObserver.observe(element, { box: 'border-box' });
     }
   }
 
@@ -1840,7 +1840,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   _updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation = false) {
-    if (arrowscrollbox) {
+    if (arrowscrollbox && !(this._inChangingWorkspace && !forAnimation && !this._alwaysAnimateMarginTop)) {
+      delete this._alwaysAnimateMarginTop;
       const essentialsHeight = essentialContainer.getBoundingClientRect().height;
       workspaceIndicator.style.marginTop = essentialsHeight + 'px';
       let arrowMarginTop = pinnedContainer.getBoundingClientRect().height;
@@ -1849,8 +1850,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         document.getElementById('zen-tabs-wrapper').style.marginTop = essentialsHeight + 'px';
         pinnedContainer.style.marginTop = '';
       } else {
-        arrowMarginTop += essentialsHeight;
+        arrowMarginTop += forAnimation ? 0 : essentialsHeight;
         pinnedContainer.style.marginTop = essentialsHeight + 'px';
+        if (forAnimation) {
+          document.getElementById('zen-tabs-wrapper').style.marginTop = '';
+        }
       }
       if (!forAnimation && !this._inChangingWorkspace) {
         // TODO:
@@ -2112,6 +2116,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       for (const cloned of clonedEssentials) {
         cloned.container.remove();
       }
+      this._alwaysAnimateMarginTop = true;
       this.updateTabsContainers();
     }
     const essentialsContainer = this.getEssentialsSection(newWorkspace.containerTabId);
@@ -2794,7 +2799,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           const containerTabId = parseInt(tab.parentNode.getAttribute('container'));
           workspaceToSwitch = this._workspaceCache.workspaces.find((workspace) => workspace.containerTabId === containerTabId);
         } else {
-          workspaceToSwitch = this._workspaceCache.workspaces.find((workspace) => workspace.uuid === tab.getAttribute('zen-workspace-id'));
+          workspaceToSwitch = this._workspaceCache.workspaces.find(
+            (workspace) => workspace.uuid === tab.getAttribute('zen-workspace-id')
+          );
         }
         if (!workspaceToSwitch) {
           console.error('No workspace found for tab, cannot switch');