From c1784bb4ab1e6fc40381fe304025dbdd5ec718b5 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Thu, 14 Dec 2023 13:08:27 -0300 Subject: [PATCH] fix(cxl-ui): cxl-marketing-nav dynamic height bug on mobile devices https://app.clickup.com/t/86aykudx5?comment=90140013142856 --- .../cxl-lumo-styles/scss/themes/vaadin-overlay.scss | 11 +++++++++-- packages/storybook/cxl-ui/cxl-marketing-nav.data.json | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss index d38a308fc..59ea01edc 100644 --- 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 index ddc147c53..f821caf2d 100644 --- 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" } ],