Fix sidebar width calculations and improve compact mode styling; ensure accurate width properties are set and remove unnecessary transformations.

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -69,7 +69,7 @@
     }
 
     &:not([zen-right-side='true']) #navigator-toolbox {
-      left: calc(-1 * var(--zen-sidebar-width) + 1px);
+      left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
     }
 
     /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
@@ -86,7 +86,7 @@
         --zen-compact-float: calc(var(--zen-element-separation) + 1px);
 
         &:not([animate='true']) {
-          right: calc(-1 * var(--zen-sidebar-width) + 1px);
+          right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
         }
       }
 
@@ -105,7 +105,13 @@
       border: 1px solid var(--zen-colors-border-contrast);
       /* times 4 because we have the inner padding and the outter padding to consider */
       :root[zen-sidebar-expanded='true'] & {
-        width: calc(100% + var(--zen-toolbox-padding));
+        &[has-animated-padding='true'] {
+          width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
+        }
+
+        &:not([has-animated-padding='true']) {
+          width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
+        }
       }
 
       :root[zen-single-toolbar='true'] {

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -129,7 +129,6 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity 0.1s ease-in-out;
     pointer-events: none;
@@ -140,10 +139,6 @@
   }
 }
 
-.zen-split-view-splitter[orient='vertical']::before {
-  transform: translate(-75%, -50%);
-}
-
 .zen-sidebar-web-panel-splitter[side='right'] {
   left: 100%;
 }

src/browser/base/zen-components/ZenCompactMode.mjs

@@ -141,10 +141,17 @@ var gZenCompactModeManager = {
     this.animateCompactMode();
   },
 
-  getAndApplySidebarWidth() {
+  // NOTE: Dont actually use event, it's just so we make sure
+  // the caller is from the ResizeObserver
+  getAndApplySidebarWidth(event = undefined) {
     let sidebarWidth = this.sidebar.getBoundingClientRect().width;
     if (sidebarWidth > 1) {
       gZenUIManager.restoreScrollbarState();
+      // Second variable to get the genuine width of the sidebar
+      this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`);
+      if (event && this.preference) {
+        return;
+      }
       this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
     }
     return sidebarWidth;
@@ -161,8 +168,12 @@ var gZenCompactModeManager = {
       !this.sidebar.hasAttribute('zen-has-empty-tab') &&
       !this.sidebar.hasAttribute('zen-has-hover');
     // Do this so we can get the correct width ONCE compact mode styled have been applied
+    const titlebar = this.sidebar.querySelector('#titlebar');
     if (canAnimate) {
       this.sidebar.setAttribute('animate', 'true');
+      titlebar.setAttribute('has-animated-padding', 'true');
+    } else {
+      titlebar.removeAttribute('has-animated-padding');
     }
     this.sidebar.style.removeProperty('margin-right');
     this.sidebar.style.removeProperty('margin-left');