Prefers reduced motion fix

Author: mgurgel

special-pages/pages/special-error/app/components/AdvancedInfo.jsx

@@ -63,12 +63,14 @@ export function AdvancedInfo() {
 
     return (
         <div className={styles.wrapper}>
-            <div className={styles.container} onAnimationEnd={trigger}>
-                <AdvancedInfoHeading />
+            <div className={styles.animationContainer} onAnimationEnd={trigger}>
+                <div className={styles.container}>
+                    <AdvancedInfoHeading />
 
-                <AdvancedInfoContent />
+                    <AdvancedInfoContent />
 
-                <VisitSiteLink elemRef={ref} />
+                    <VisitSiteLink elemRef={ref} />
+                </div>
             </div>
         </div>
     );

special-pages/pages/special-error/app/components/AdvancedInfo.module.css

@@ -1,14 +1,17 @@
+.animationContainer {
+    animation-duration: 300ms;
+    animation-fill-mode: forwards;
+    animation-name: appear;
+}
+
 .container {
     align-items: flex-start;
     display: flex;
     flex-flow: column;
     gap: var(--sp-4);
     max-width: var(--ios-content-max-width);
+    padding: var(--sp-6) var(--sp-10);
     width: 100%;
-
-    animation-duration: 300ms;
-    animation-fill-mode: forwards;
-    animation-name: appear;
 }
 
 .heading {
@@ -38,11 +41,9 @@
 
 @keyframes appear {
     0% {
-        padding: 0 var(--sp-10);
         max-height: 0;
     }
     100% {
-        padding: var(--sp-6) var(--sp-10);
         max-height: calc(400 * var(--px-in-rem));
     }
 }