fix(cxl-ui): cxl-marketing-nav dynamic height bug on mobile devices

https://app.clickup.com/t/86aykudx5?comment=90140013142856
conversionxl · Dec 15, 2023 · c1784bb · c1784bb
1 parent 2d7288e
commit c1784bb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -34,14 +34,17 @@
 
   &::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);
   }
 
   &::part(backdrop) {
     display: none;
   }
-  
+
   &::part(overlay) {
     box-shadow: 0 0 0 1px var(--lumo-shade-5pct), 0 2px 6px -1px var(--lumo-shade-5pct),
       0 8px 24px -4px var(--lumo-shade-5pct);
@@ -65,7 +68,7 @@
     align-items: stretch !important;
     justify-content: flex-end !important;
 
-    
+
     [part='overlay'] {
       top: 0 !important;
       right: 0 !important;
@@ -74,8 +77,12 @@
       align-items: stretch !important;
       justify-content: flex-end !important;
       width: 100vw;
+      /* Repeated as fallback for older browsers*/
       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;

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json
@@ -55,7 +55,7 @@
       "id": 51595,
       "parent": 0,
       "href": "https://cxl.com/institute/pricing/",
-      "classes": ["menu-item-cta", "menu-item-split-nav", "menu-item-start-free-trial"],
+      "classes":  ["menu-item-split-nav","menu-item-start-free-trial","nmr-logged-out","menu-item-cta","menu-item","menu-item-type-custom","menu-item-object-custom"],
       "text": "Sign up now"
     }
   ],