Refactor CSS animations and layout for improved UI experience

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% {

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],

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,

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 {