From f41bc8356e9e033346664c182801d9adf3e81f33 Mon Sep 17 00:00:00 2001
From: itskovacs <itskovacs@proton.me>
Date: Mon, 6 Oct 2025 19:11:20 +0200
Subject: [PATCH] :lipstick: animations

---
 .../app/components/trip/trip.component.html   |  2 +-
 src/src/styles.scss                           | 28 +++++++++++--------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/src/app/components/trip/trip.component.html b/src/src/app/components/trip/trip.component.html
index 7cd0901..7a414a3 100644
--- a/src/src/app/components/trip/trip.component.html
+++ b/src/src/app/components/trip/trip.component.html
@@ -530,7 +530,7 @@
 </div>
 
 <div
-  class="fixed bottom-6 left-6 z-40 w-40 md:w-60 max-h-[50vh] bg-white/90 dark:bg-surface-900/90 backdrop-blur-lg shadow-xl rounded-md overflow-hidden"
+  class="fixed bottom-6 left-6 z-40 w-40 md:w-60 max-h-[50vh] bg-white/90 dark:bg-surface-900/90 shadow-xl rounded-md overflow-hidden"
   [class.prettyprint]="isPrinting">
   @if (isMapFullscreenDays) {
   <div animate.enter="expand" animate.leave="collapse" class="overflow-y-auto max-h-[calc(30vh-5rem)] p-2 space-y-1">
diff --git a/src/src/styles.scss b/src/src/styles.scss
index 2d125e5..4dd4911 100644
--- a/src/src/styles.scss
+++ b/src/src/styles.scss
@@ -243,6 +243,19 @@ html {
   }
 }
 
+@keyframes toggle {
+  0% {
+    max-height: 0;
+    opacity: 0;
+    transition: all 300ms ease-in;
+  }
+  100% {
+    max-height: auto;
+    opacity: 1;
+    transition: all 300ms ease-out;
+  }
+}
+
 .slide-x {
   animation: slide-x 0.3s both normal;
 }
@@ -260,17 +273,10 @@ html {
 }
 
 .expand {
-  height: auto;
-  opacity: 1;
-  transition:
-    height 300ms ease-out,
-    opacity 300ms ease-out;
+  animation: toggle 0.3s both normal;
 }
 
 .collapse {
-  height: 0;
-  opacity: 0;
-  transition:
-    height 300ms ease-in,
-    opacity 300ms ease-in;
-}
\ No newline at end of file
+  animation: toggle 0.3s both reverse;
+  overflow: hidden;
+}