From 2b18df8398aa1fdb9f30e7e4e12261ba8255ba54 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Wed, 30 Oct 2024 13:18:27 +0100
Subject: [PATCH] Fix animation and layout issues in zen-components and
 zen-styles

---
 src/browser/base/content/zen-components       |  2 +-
 .../content/zen-styles/zen-animations.css     | 36 +++++++++----------
 .../base/content/zen-styles/zen-glance.css    |  3 +-
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components
index b1b3cb855..16fc60e1f 160000
--- a/src/browser/base/content/zen-components
+++ b/src/browser/base/content/zen-components
@@ -1 +1 @@
-Subproject commit b1b3cb85553ecdb0f9c5a532c02b59b7c45fe7a4
+Subproject commit 16fc60e1f081254c6cab6d9b7cc8ef9598405841
diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index d09562a45..54cc688d8 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -244,28 +244,28 @@
   }
 
   30% {
-    top: -5px;
+    top: 50%;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, -50%);
   }
 
   70% {
     /* make the box grow to full width/height */
     opacity: 1;
-    transform: translateX(-50%);
-    top: -5px;
+    transform: translate(-50%, -50%);
+    top: 50%;
     left: 50%;
-    width: 78%;
-    height: 103%;
+    width: 87%;
+    height: 87%;
   }
 
   100% {
     /* make the box shrink to final width/height and x/y coordinates */
-    transform: translateX(-50%);
+    transform: translate(-50%, -50%);
     opacity: 1;
-    width: 75%;
-    height: 100%;
-    top: -5px;
+    width: 85%;
+    height: 85%;
+    top: 50%;
     left: 50%;
   }
 }
@@ -284,22 +284,22 @@
   }
 
   100% {
-    transform: translateX(-50%);
+    transform: translate(-50%, -50%);
     opacity: 1;
-    width: 75%;
-    height: 100%;
-    top: -5px;
+    width: 85%;
+    height: 85%;
+    top: 50%;
     left: 50%;
   }
 }
 
 @keyframes zen-glance-buttons-animation-full {
   from {
-    width: 75%;
-    height: 100%;
-    top: -5px;
+    width: 85%;
+    height: 85%;
+    top: 50%;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, -50%);
   }
 
   to {
diff --git a/src/browser/base/content/zen-styles/zen-glance.css b/src/browser/base/content/zen-styles/zen-glance.css
index d206b8b79..30a29a21d 100644
--- a/src/browser/base/content/zen-styles/zen-glance.css
+++ b/src/browser/base/content/zen-styles/zen-glance.css
@@ -60,6 +60,7 @@
       width: var(--initial-width);
       height: var(--initial-height);
       position: absolute;
+      border-radius: var(--zen-border-radius);
       opacity: 0;
       top: 0;
       left: 0;
@@ -126,7 +127,7 @@
 
       &[animate-full='true'] {
         opacity: 1;
-        animation: zen-glance-buttons-animation-full 0.2s ease-in-out forwards !important;
+        animation: zen-glance-buttons-animation-full 0.3s ease-in-out forwards !important;
 
         & #zen-glance-sidebar-container {
           opacity: 0 !important;