diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss index 8b0e9f889..5e8bf9553 100644 --- a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss @@ -83,8 +83,8 @@ :host([theme~="cxl-navigation"]) { &::part(overlay), &::part(content) { - height: calc(100vh - 44px); - max-height: calc(100vh - 44px); + height: calc(100vh - 40px); + max-height: calc(100vh - 40px); } &::part(backdrop) { diff --git a/packages/cxl-ui/scss/cxl-navigation.scss b/packages/cxl-ui/scss/cxl-navigation.scss index 2e2376e15..b675146a3 100644 --- a/packages/cxl-ui/scss/cxl-navigation.scss +++ b/packages/cxl-ui/scss/cxl-navigation.scss @@ -2,7 +2,6 @@ :host { --lumo-clickable-cursor: pointer; - border-bottom: 1px solid var(--lumo-shade-10pct); ::part(menu-bar-button) { color: var(--lumo-shade); @@ -51,12 +50,22 @@ ::part(menu-bar-button), ::slotted(.menu-item) { white-space: nowrap; + min-width: min-content; + + &.menu-item-split-nav { + margin-left: auto; + } } - ::slotted(.menu-item-split-nav) { - margin-left: auto; + ::part(menu-bar-button) { + ::slotted(.menu-item-split-nav) & { + margin-left: auto; + } } + + + /* stylelint-disable-next-line selector-no-qualifying-type */ &#menu-global-items { background-color: var(--lumo-shade); @@ -71,6 +80,7 @@ /* stylelint-disable-next-line selector-no-qualifying-type */ &#menu-primary-items { background-color: var(--lumo-base-color); + border-bottom: 1px solid var(--lumo-shade-10pct); } } } diff --git a/packages/cxl-ui/src/components/cxl-navigation.js b/packages/cxl-ui/src/components/cxl-navigation.js index 0769bbbb4..bf3ba32e1 100644 --- a/packages/cxl-ui/src/components/cxl-navigation.js +++ b/packages/cxl-ui/src/components/cxl-navigation.js @@ -85,14 +85,18 @@ export class CXLNavigationElement extends LitElement { return html`