fix: Fixed split view having clipped dialogs, b=no-bug, c=compact-mode, split-view, workspaces

src/zen/compact-mode/ZenCompactMode.mjs

@@ -209,7 +209,7 @@ var gZenCompactModeManager = {
   // the caller is from the ResizeObserver
   getAndApplySidebarWidth(event = undefined) {
     if (this._ignoreNextResize) {
-      this._ignoreNextResize = false;
+      delete this._ignoreNextResize;
       return;
     }
     let sidebarWidth = this.sidebar.getBoundingClientRect().width;
@@ -245,9 +245,9 @@ var gZenCompactModeManager = {
   },
 
   animateCompactMode() {
+    // Get the splitter width before hiding it (we need to hide it before animating on right)
+    document.documentElement.setAttribute('zen-compact-animating', 'true');
     return new Promise((resolve) => {
-      // Get the splitter width before hiding it (we need to hide it before animating on right)
-      document.documentElement.setAttribute('zen-compact-animating', 'true');
       // We need to set the splitter width before hiding it
       let splitterWidth = document
         .getElementById('zen-sidebar-splitter')
@@ -268,6 +268,7 @@ var gZenCompactModeManager = {
       this.sidebar.style.removeProperty('margin-left');
       this.sidebar.style.removeProperty('transform');
       window.requestAnimationFrame(() => {
+        delete this._ignoreNextResize;
         let sidebarWidth = this.getAndApplySidebarWidth();
         const elementSeparation = ZenThemeModifier.elementSeparation;
         if (!canAnimate) {
@@ -324,6 +325,8 @@ var gZenCompactModeManager = {
           } else {
             sidebarWidth -= elementSeparation;
           }
+          this.sidebar.style.marginRight = '0px';
+          this.sidebar.style.marginLeft = '0px';
           gZenUIManager.motion
             .animate(
               this.sidebar,
@@ -335,7 +338,7 @@ var gZenCompactModeManager = {
                 ease: 'easeIn',
                 type: 'spring',
                 bounce: 0,
-                duration: 0.2,
+                duration: 0.1,
               }
             )
             .then(() => {
@@ -386,7 +389,7 @@ var gZenCompactModeManager = {
                 ease: 'easeOut',
                 type: 'spring',
                 bounce: 0,
-                duration: 0.2,
+                duration: 0.1,
               }
             )
             .then(() => {

src/zen/split-view/zen-decks.css

@@ -35,9 +35,9 @@
   position: absolute !important;
   overflow: hidden;
 
-  &.deck-selected:has(.dialogStack:not([hidden='true'])) {
+  & .dialogStack {
     /* Fix for issue https://github.com/zen-browser/desktop/issues/7564 */
-    z-index: 1;
+    position: absolute;
   }
 }
 

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1129,7 +1129,7 @@
             `linear-gradient(to top, ${color3} -30%, transparent 60%)`,
           ].join(', ');
         }
-        return [`linear-gradient(${rotation}deg, ${color1} -30%, ${color3} 100%)`].join(', ');
+        return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
       } else {
         // Just return a linear gradient with all colors
         const gradientColors = themedColors.map((color) =>