From 1cc2bc70c1936a9bffff11f069be75b5ba2e1969 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Thu, 19 Jun 2025 07:06:01 +0000
Subject: [PATCH] Merged in fix/SW-2814 (pull request #2377)

fix(SW-2814): use slide-in animation for smaller devices

* fix(SW-2814): use slide-in animation for smaller devices


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra
---
 .../SidePeek/sidePeek.module.css              | 24 ++++---------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
index fbfbe1014..11b9b1fc5 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -1,6 +1,7 @@
 .modal {
   --sidepeek-desktop-width: 560px;
 }
+
 @keyframes slide-in {
   from {
     right: calc(-1 * var(--sidepeek-desktop-width));
@@ -11,16 +12,6 @@
   }
 }
 
-@keyframes slide-up {
-  from {
-    top: 100vh;
-  }
-
-  to {
-    top: 0;
-  }
-}
-
 .overlay {
   position: fixed;
   top: 0;
@@ -44,11 +35,11 @@
 }
 
 .modal[data-entering] {
-  animation: slide-up 300ms;
+  animation: slide-in 250ms;
 }
 
 .modal[data-exiting] {
-  animation: slide-up 300ms reverse;
+  animation: slide-in 250ms reverse;
 }
 
 .dialog {
@@ -89,6 +80,7 @@
   padding: var(--Spacing-x4);
   overflow-y: auto;
 }
+
 @media screen and (min-width: 1367px) {
   .modal {
     top: 0;
@@ -96,12 +88,4 @@
     width: var(--sidepeek-desktop-width);
     height: 100vh;
   }
-
-  .modal[data-entering] {
-    animation: slide-in 250ms;
-  }
-
-  .modal[data-exiting] {
-    animation: slide-in 250ms reverse;
-  }
 }