docs(docs-infra): fix banner position on mobile & tablet (angular#62521)

JeanMeche · AndrewKushnir · commit efb4783ca0bf · 2025-07-09T12:39:14.000-07:00
angular#62509 PR Close angular#62521
diff --git a/adev/src/app/features/home/components/home-animation/home-animation.component.scss b/adev/src/app/features/home/components/home-animation/home-animation.component.scss
@@ -70,14 +70,27 @@ $transition: 200ms linear;
       .adev-banner-container {
         display: flex;
         flex-direction: column;
-        gap: .5rem;
+        gap: 0.5rem;
         position: absolute;
         transition:
           background 0.3s ease,
           border 0.3s ease,
           transform $transition;
         top: var(--layout-padding);
         left: calc(var(--layout-padding) + var(--primary-nav-width));
+
+        @include mq.for-tablet-landscape-down {
+          top: 6rem;
+          left: var(--layout-padding);
+          /* Assuming the container width is identical to the viewport width (mobile device). */
+          max-width: calc(100% - var(--layout-padding) * 2);
+        }
+
+        @include mq.for-phone-only {
+          & {
+            top: 5rem;
+          }
+        }
       }
 
       .adev-banner {
@@ -93,21 +106,6 @@ $transition: 200ms linear;
         width: fit-content;
         box-sizing: border-box;
 
-        @include mq.for-tablet-landscape-down {
-          & {
-            top: 6rem;
-            left: var(--layout-padding);
-            /* Assuming the container width is identical to the viewport width (mobile device). */
-            max-width: calc(100% - var(--layout-padding) * 2);
-          }
-        }
-
-        @include mq.for-phone-only {
-          & {
-            top: 5rem;
-          }
-        }
-
         h1,
         p {
           display: inline;
