Refactor compact mode styles and improve tab positioning for better layout consistency

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

@@ -54,7 +54,8 @@
         opacity: 0;
 
         :root[zen-single-toolbar='true'] & {
-          top: var(--zen-element-separation);
+          top: calc(var(--zen-element-separation) / 2);
+          height: calc(100% - var(--zen-element-separation));
         }
       }
 
@@ -254,14 +255,14 @@
           1.003423 100%
         );
         transition:
-          left 0.3s var(--zen-compact-mode-func),
+          left 0.25s var(--zen-compact-mode-func),
-          right 0.3s var(--zen-compact-mode-func);
+          right 0.25s var(--zen-compact-mode-func);
         opacity: 1;
 
         &:not([supress-primary-adjustment='true']) {
-          left: -1px;
+          left: calc(var(--zen-element-separation) / -2);
           :root[zen-right-side='true'] & {
-            right: -1px;
+            right: calc(var(--zen-element-separation) / -2);
             left: auto;
           }
         }

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

@@ -263,6 +263,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     if (!this.fakeBrowser) {
       return;
     }
+    // if we are still in that 1/4 of the way to the edge then we should not hide the fake browser
+    if (event.clientX < (panelsWidth / 4) * 3 && event.clientX > panelsRect.left) {
+      return;
+    }
     this.fakeBrowser.classList.add('fade-out');
     gBrowser.selectedTab = this._draggingTab;
     this._draggingTab = null;
@@ -1507,7 +1511,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
     const droppedOnTab = gBrowser.getTabForBrowser(browser);
     if (droppedOnTab && droppedOnTab !== draggedTab) {
       // Calculate which side of the target browser the drop occurred
-      const browserRect = browser.getBoundingClientRect();
+      // const browserRect = browser.getBoundingClientRect();
       // const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserRect);
       const hoverSide = 'right';
 
@@ -1567,7 +1571,6 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
             draggedTab.linkedBrowser.closest('.browserSidebarContainer'),
             {
               scale: [0.98, 1],
-              opacity: [0, 1],
             },
             {
               type: 'spring',

src/browser/themes/shared/tabbrowser/tabs-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index 01815c2114a627e5cac183c702bd82f1bd4f58f8..3a453164ee8a555db2a0ba28288d69857a4933bc 100644
+index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f023b2641bf 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
 @@ -31,7 +31,7 @@
@@ -42,10 +42,37 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..3a453164ee8a555db2a0ba28288d6985
  
    #tabbrowser-tabs[orient=vertical] & {
 -    top: 7px;
-+    top: 0px;
++    top: -7px;
    }
  
    &[crashed] {
+@@ -510,7 +509,7 @@
+   }
+ 
+   #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
+-  &[pinned]:not([crashed]) {
++  &:not([crashed]) {
+     &[soundplaying] {
+       list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+     }
+@@ -572,7 +571,7 @@
+   }
+ 
+   #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]),
+-  &[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
++  &:is([soundplaying], [muted], [activemedia-blocked]),
+   &[crashed] {
+     display: revert;
+   }
+@@ -586,7 +585,7 @@
+   --button-min-height-small: 24px;
+   --button-border-radius: var(--border-radius-small);
+ 
+-  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
++  #tabbrowser-tabs:is([orient="horizontal"]) &:not([pinned]):not([crashed]) {
+     &:is([soundplaying], [muted], [activemedia-blocked]) {
+       display: block;
+     }
 @@ -617,14 +616,14 @@
    }