Enhance vertical tabs layout with max-height adjustment; update hover…

… duration and animation easing for improved user experience
zen-browser · Jan 17, 2025 · dd5a59a · dd5a59a
1 parent ee86bff
commit dd5a59a
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -341,6 +341,7 @@
   padding-inline-end: 0 !important;
   display: flex !important;
   flex-direction: column;
+  max-height: calc(100vh - 12 * (var(--tab-min-height) + 2 * var(--tab-block-margin))) !important;
 
   & .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
     background: transparent !important;

diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -274,7 +274,7 @@ var gZenCompactModeManager = {
       {
         element: this.sidebar,
         screenEdge: this.sidebarIsOnRight ? 'right' : 'left',
-        keepHoverDuration: 300,
+        keepHoverDuration: 100,
       },
       {
         element: document.getElementById('zen-appcontent-navbar-container'),

diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1332,14 +1332,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     if (out) {
       element.animate([{ transform: 'translateX(0)' }, { transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }], {
         duration: 100,
-        easing: 'ease',
+        easing: 'ease-in',
         fill: 'both',
       }).onfinish = callback;
       return;
     }
     element.animate([{ transform: `translateX(${direction === 'left' ? '-' : ''}100%)` }, { transform: 'translateX(0)' }], {
       duration: 100,
-      easing: 'ease',
+      easing: 'ease-out',
       fill: 'both',
     }).onfinish = callback;
   }