From bb5606685748c93712521cd05e3db44060c0abb7 Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Fri, 13 Sep 2024 20:35:22 +0200
Subject: [PATCH] Refactor CSS animations and layout for improved UI experience

---
 .../base/content/zen-styles/zen-animations.css   | 16 ++++++++++++++--
 .../base/content/zen-styles/zen-compact-mode.css |  4 ----
 .../content/zen-styles/zen-sidebar-panels.css    |  4 ++--
 .../zen-styles/zen-tabs/vertical-tabs.css        |  5 ++++-
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index b7781a477..0e2c48ac7 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -80,6 +80,18 @@
 }
 
 @keyframes zen-sidebar-panel-animation-2 {
+  0% {
+    opacity: 0;
+    transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes zen-vtabs-animation {
   0% {
     opacity: 0;
     transform: translateX(-5px);
@@ -112,12 +124,12 @@
 @keyframes zen-sidebar-panel-animation-reverse {
   0% {
     opacity: 1;
-    transform: translateX(0);
+    transform: translateX(0) scale3d(1, 1, 1);
   }
 
   99% {
     opacity: 0;
-    transform: translateX(-50px);
+    transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
   }
 
   100% {
diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css
index f1e433268..0bfbe4e28 100644
--- a/src/browser/base/content/zen-styles/zen-compact-mode.css
+++ b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -198,10 +198,6 @@
       transform: translateX(calc(100% - (var(--zen-compact-toolbox-margin-single) / 2))) !important;
     }
 
-    & > vbox {
-      float: right;
-    }
-
     &:hover,
     &:focus-within,
     &[zen-user-show],
diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
index 75a55125c..3ad381252 100644
--- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css
+++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
@@ -146,13 +146,13 @@
 #zen-sidebar-web-panel[pinned='true'] {
   position: absolute;
   z-index: 1;
-  animation: zen-sidebar-panel-animation-2 0.2s ease-in-out forwards;
+  animation: zen-sidebar-panel-animation-2 0.15s ease-in-out forwards;
 }
 
 #zen-sidebar-web-panel[hidden='true'][pinned='true'] {
   display: flex;
   pointer-events: none;
-  animation: zen-sidebar-panel-animation-reverse 0.2s ease-in-out forwards;
+  animation: zen-sidebar-panel-animation-reverse 0.15s ease-in-out forwards;
 }
 
 #zen-sidebar-web-header,
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
index 22be705fb..93af607b3 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -115,6 +115,9 @@
       justify-content: space-between;
 
       padding-top: calc(var(--zen-toolbox-padding) * 2);
+
+      width: calc(100% - var(--zen-toolbox-padding));
+      position: relative;
     }
 
     /* Mark: Fix separator paddings */
@@ -265,7 +268,7 @@
         position: absolute;
         padding: var(--zen-toolbox-padding);
         transition: 0 !important;
-        animation: zen-sidebar-panel-animation-2 0.2s ease-in-out;
+        animation: zen-vtabs-animation 0.2s ease-in-out;
       }
 
       &[zen-right-side='true'] #TabsToolbar {