fix(SW-696): add unwrap to surprises

add animations to sliding cards

various minor fixes

components/MyPages/Surprises/surprises.module.css

@@ -28,7 +28,7 @@
   z-index: 100;
 
   &[data-entering] {
-    animation: modal-fade 200ms;
+    animation: modal-fade 200ms ease-in;
   }
   &[data-exiting] {
     animation: modal-fade 200ms reverse ease-in;
@@ -40,6 +40,17 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    &:before {
+      background-image: url("/_static/img/confetti.svg");
+      background-repeat: no-repeat;
+      background-position: center 40%;
+      content: "";
+      width: 100%;
+      height: 100%;
+      animation: modal-fade 200ms ease-in;
+      display: block;
+    }
   }
 }
 
@@ -65,6 +76,10 @@
   flex-direction: column;
   gap: var(--Spacing-x2);
   padding-bottom: var(--Spacing-x2);
+
+  /* to hide sliding cards */
+  position: relative;
+  overflow: hidden;
 }
 
 @media screen and (min-width: 768px) {
@@ -90,8 +105,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   padding: 0 var(--Spacing-x3);
   gap: var(--Spacing-x2);
+  min-height: 350px;
 }
 
 .nav {
@@ -103,6 +120,8 @@
 }
 
 .nav button {
+  user-select: none;
+
   &:nth-child(1) {
     padding-left: 0;
   }