Onboarding: Fix welcome message appearing off screen (#1650)

* Onboarding: Prevent welcome message having a negative translateY value

* Ignore stylelint error

* Position: fixed

---------

Co-authored-by: Marcos Gurgel <[email protected]>

Author: noisysocks

special-pages/pages/onboarding/app/components/App2.module.css

@@ -23,11 +23,11 @@
         transition: transform 0.3s ease-in-out;
         transform: translateY(0);
 
-        &[data-current="welcome"] {
-            transform: translateY(calc(50vh - 288px));
-        }
+        &[data-current="welcome"],
         &[data-current="getStarted"] {
-            transform: translateY(calc(50vh - 288px));
+            /* max() is not supported by stylelint's CSS parser: https://github.com/csstree/csstree/issues/164 */
+            /* stylelint-disable-next-line csstree/validator */
+            transform: translateY(max(50vh - 288px, 0px));
         }
     }
 

special-pages/pages/onboarding/app/components/v3/Hiker.module.css

@@ -1,6 +1,6 @@
 .hiker {
     bottom: 0;
-    position: absolute;
+    position: fixed;
     right: var(--sp-35);
 
     animation-name: hiker-appear;