From 48d5b32a5a9077918a8f9bfb452fb92f9012558d Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Sat, 7 Mar 2026 16:43:41 +0100
Subject: [PATCH] feat: Improve transform detection, b=no-bug, c=common

---
 src/zen/common/styles/zen-browser-ui.css |  6 ++++++
 src/zen/library/ZenLibrary.mjs           | 20 ++++++++++++++------
 src/zen/library/zen-library.css          |  8 ++++----
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css
index 75b49fc04..56869908f 100644
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -12,6 +12,12 @@
   /* see issue #426 */
   background: var(--zen-navigator-toolbox-background, transparent) !important;
   --inactive-titlebar-opacity: 0.8;
+
+  &[zen-library-open="true"] {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 #nav-bar,
diff --git a/src/zen/library/ZenLibrary.mjs b/src/zen/library/ZenLibrary.mjs
index 17dc317d8..b5f19b139 100644
--- a/src/zen/library/ZenLibrary.mjs
+++ b/src/zen/library/ZenLibrary.mjs
@@ -56,11 +56,19 @@ export class ZenLibrary extends MozLitElement {
     // Add connected call back and make `appContentWrapper` transform translate the oposite of this element
     this.#resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => {
-        let width = window.windowUtils.getBoundsWithoutFlushing(this).width;
-        if (gZenVerticalTabsManager._prefsRightSide) {
-          width = -width;
+        let isRightSide = gZenVerticalTabsManager._prefsRightSide;
+        let translateX = window.windowUtils.getBoundsWithoutFlushing(this)[
+          isRightSide ? "left" : "right"
+        ];
+        let contentPosition = window.windowUtils.getBoundsWithoutFlushing(lazy.appContentWrapper)[
+          isRightSide ? "right" : "left"
+        ]
+        let existingTransform = new DOMMatrix(lazy.appContentWrapper.style.transform).m41;
+        translateX = translateX-contentPosition + existingTransform;
+        if (isRightSide) {
+          translateX = -translateX;
         }
-        lazy.appContentWrapper.style.transform = `translateX(${width}px)`;
+        lazy.appContentWrapper.style.transform = `translateX(${translateX}px)`;
       });
     });
     this.#resizeObserver.observe(this);
@@ -139,7 +147,7 @@ export class ZenLibrary extends MozLitElement {
     let instance = this.getInstance();
     instance.toggleAttribute("open");
     if (!instance.isOpen) {
-      gNavToolbox.style.display = "";
+      gNavToolbox.removeAttribute("zen-library-open");
       lazy.appContentWrapper.style.transform = "";
       if (!instance._deletionIdleCallbackId) {
       instance._deletionIdleCallbackId = requestIdleCallback(() => {
@@ -151,7 +159,7 @@ export class ZenLibrary extends MozLitElement {
         cancelIdleCallback(instance._deletionIdleCallbackId);
         instance._deletionIdleCallbackId = null;
       }
-      gNavToolbox.style.display = "none";
+      gNavToolbox.setAttribute("zen-library-open", "true");
     }
   }
 }
diff --git a/src/zen/library/zen-library.css b/src/zen/library/zen-library.css
index b0470ea26..6ec165c71 100644
--- a/src/zen/library/zen-library.css
+++ b/src/zen/library/zen-library.css
@@ -5,8 +5,8 @@
  */
 
 :host {
-  transition: max-width 0.1s ease-in-out;
-  max-width: 0;
+  transition: transform 0.1s ease-in-out;
+  transform: translateX(-100%);
   z-index: 1;
   display: block;
   position: absolute;
@@ -14,8 +14,8 @@
 }
 
 :host([open]) {
-    max-width: 100%;
-  }
+  transform: translateX(0);
+}
 
 #zen-library-sidebar {
   display: flex;