From 2f969c8ac4acb5f4eace34428fd389e27f8f674e Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Tue, 8 Jul 2025 15:56:11 +0200
Subject: [PATCH] docs(docs-infra): fix banner position on mobile & tablet
 (#62521)

#62509

PR Close #62521
---
 .../home-animation.component.scss             | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

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
index 1dd6c28c5c3..11b08711071 100644
--- 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,7 +70,7 @@ $transition: 200ms linear;
       .adev-banner-container {
         display: flex;
         flex-direction: column;
-        gap: .5rem;
+        gap: 0.5rem;
         position: absolute;
         transition:
           background 0.3s ease,
@@ -78,6 +78,19 @@ $transition: 200ms linear;
           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;