From 7c9539422722d91d222ac4f29aa31ac25560dccf Mon Sep 17 00:00:00 2001
From: Raphael Mattos <raphael.mattos@contextaware.com.br>
Date: Tue, 19 Dec 2023 14:16:52 -0300
Subject: [PATCH] fix(cxl-lumo-styles): simplify vaadin-overlay theme for nav
 mobile layout

---
 .../scss/themes/vaadin-overlay.scss           | 35 ++++---------------
 packages/cxl-ui/scss/cxl-marketing-nav.scss   |  1 +
 2 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
index 194a15513..fec93c65f 100644
--- a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
+++ b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -35,10 +35,8 @@
   &::part(overlay),
   &::part(content) {
     /* Repeated as fallback for older browsers */
-    height: calc(100vh - 40px);
-    height: calc(100dvh - 40px);
-    max-height: calc(100vh - 40px);
-    max-height: calc(100dvh - 40px);
+    max-height: calc(100% - var(--cxl-marketing-nav-height));
+    max-height: calc(100dvh - var(--cxl-marketing-nav-height));
   }
 
   &::part(backdrop) {
@@ -50,42 +48,23 @@
       0 8px 24px -4px var(--lumo-shade-5pct);
   }
 
-  &::part(overlay),
-  &::part(content) {
-    height: initial;
-    max-height: initial;
-  }
-
   &::part(content) {
     padding: var(--lumo-space-s);
   }
 
+  /* It's necessary to define some properties again in a media query, because of vaadin-overlay hard coded styles at 420px*/
   @media (max-width: 568px), (max-height: 568px) {
     top: 0 !important;
-    right: 0 !important;
     bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-    left: 0 !important;
     align-items: stretch !important;
     justify-content: flex-end !important;
 
-
     [part='overlay'] {
-      top: 0 !important;
-      right: 0 !important;
+      position: relative;
+      height: 100dvh;
+      max-height: calc(100dvh - var(--cxl-marketing-nav-height));
       bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-      left: 0 !important;
-
-      /* Necessary to override hard-coded media query from vaadin-overlay style at 420px*/
-      align-items: stretch !important;
-      justify-content: flex-end !important;
-      height: calc(100vh - 40px) !important;
-      height: calc(100dvh - 40px) !important;
-      max-height: calc(100vh - 40px) !important;
-      max-height: calc(100dvh - 40px) !important;
-
-      border-top: 1px solid var(--lumo-shade-5pct);
-      border-radius: 0;
-      box-shadow: none;
+      width: 100%;
     }
 
     /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
diff --git a/packages/cxl-ui/scss/cxl-marketing-nav.scss b/packages/cxl-ui/scss/cxl-marketing-nav.scss
index 6f3dacecf..3a4a9ae02 100644
--- a/packages/cxl-ui/scss/cxl-marketing-nav.scss
+++ b/packages/cxl-ui/scss/cxl-marketing-nav.scss
@@ -21,6 +21,7 @@
     justify-content: center;
     width: 100%;
     max-width: 100vw;
+    min-height: var(--cxl-marketing-nav-min-height, 44px);
     padding: 0 var(--lumo-space-m);
     overflow: hidden;