From eb487119e9c1c29142c40c3181aaa0a261830d0a Mon Sep 17 00:00:00 2001
From: Marian Giurge <ens13533@adobe.com>
Date: Tue, 14 Oct 2025 13:24:53 +0300
Subject: [PATCH] [SITES-25247] fixed overlapped elements on 320px

---
 ui.frontend/src/main/webpack/base/sass/_grid.scss         | 4 ++++
 ui.frontend/src/main/webpack/base/sass/_variables.scss    | 1 +
 .../components/navigation/scss/styles/_nav-mobile.scss    | 6 +++++-
 .../components/search/scss/styles/_search-header.scss     | 8 ++++++++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/ui.frontend/src/main/webpack/base/sass/_grid.scss b/ui.frontend/src/main/webpack/base/sass/_grid.scss
index ee4bf51416..3f907725b7 100644
--- a/ui.frontend/src/main/webpack/base/sass/_grid.scss
+++ b/ui.frontend/src/main/webpack/base/sass/_grid.scss
@@ -22,6 +22,10 @@
 .aem-Grid {
   display: block;
   width: 100%;
+
+  @media (max-width: $screen-xxsmall) {
+    margin-top: 50px;
+  }
 }
 
 .aem-Grid::before,
diff --git a/ui.frontend/src/main/webpack/base/sass/_variables.scss b/ui.frontend/src/main/webpack/base/sass/_variables.scss
index bd34c05c3f..bf0f4ceb6e 100644
--- a/ui.frontend/src/main/webpack/base/sass/_variables.scss
+++ b/ui.frontend/src/main/webpack/base/sass/_variables.scss
@@ -36,6 +36,7 @@ $gutter-padding: 14px;
 
 $max-width: 1164px;
 $max-body-width: 1680px;
+$screen-xxsmall: 320px;
 $screen-xsmall: 475px;
 $screen-small: 767px;
 $screen-medium: 1024px;
diff --git a/ui.frontend/src/main/webpack/components/navigation/scss/styles/_nav-mobile.scss b/ui.frontend/src/main/webpack/components/navigation/scss/styles/_nav-mobile.scss
index f8f3f6fa8e..a764438d76 100644
--- a/ui.frontend/src/main/webpack/components/navigation/scss/styles/_nav-mobile.scss
+++ b/ui.frontend/src/main/webpack/components/navigation/scss/styles/_nav-mobile.scss
@@ -117,7 +117,11 @@ $nav-item-mobile-border : solid 1px rgba(255, 255, 255, 0.05);
             font-size: 1.75rem;
             padding: 0.5rem;
             float: left;
-    }
+
+            @media (max-width: $screen-xxsmall) {
+                margin-top: 90px;
+            }
+        }
 
     }
 
diff --git a/ui.frontend/src/main/webpack/components/search/scss/styles/_search-header.scss b/ui.frontend/src/main/webpack/components/search/scss/styles/_search-header.scss
index a285312a21..95d5e4ee13 100644
--- a/ui.frontend/src/main/webpack/components/search/scss/styles/_search-header.scss
+++ b/ui.frontend/src/main/webpack/components/search/scss/styles/_search-header.scss
@@ -115,10 +115,18 @@ $search-results-width: 20rem;
         
         .cmp-search__input {
             width: $search-max-mobile-width;
+
+            @media (max-width: $screen-xxsmall) {
+                margin-top: 50px;
+            }
         }
 
         .cmp-search__icon,.cmp-search__loading-indicator  {
             right: 9.5rem;
+
+            @media (max-width: $screen-xxsmall) {
+                margin-top: 50px;
+            }
         }
         
     }