fix: ensuring correct width is applied to menu bar items and menu bar buttons in overflow popover

drewharvey · drewharvey · commit 9ae5c1c1094d · 2025-04-17T18:05:24.000-07:00
diff --git a/src/component/vcf-toolbar-layout.ts b/src/component/vcf-toolbar-layout.ts
@@ -157,13 +157,18 @@ export class VcfToolbarLayout extends ResizeMixin(
       padding-top: var(--lumo-space-s);
     }
 
+    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
+      justify-content: left;
+    }
+
     .overflow-container > vaadin-button,
     .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
       --vaadin-button-padding: var(--lumo-space-s);
       --vaadin-button-margin: 0px;
     }
 
-    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
+    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button,
+    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
       width: 100%;
     }
     

Original file line number	Diff line number	Diff line change
`@@ -157,13 +157,18 @@ export class VcfToolbarLayout extends ResizeMixin(`
`157`	`157`	`padding-top: var(--lumo-space-s);`
`158`	`158`	`}`
`159`	`159`
	`160`	`+ .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {`
	`161`	`+ justify-content: left;`
	`162`	`+ }`
	`163`	`+`
`160`	`164`	`.overflow-container > vaadin-button,`
`161`	`165`	`.overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {`
`162`	`166`	`--vaadin-button-padding: var(--lumo-space-s);`
`163`	`167`	`--vaadin-button-margin: 0px;`
`164`	`168`	`}`
`165`	`169`
`166`		`- .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {`
	`170`	`+ .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button,`
	`171`	`+ .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {`
`167`	`172`	`width: 100%;`
`168`	`173`	`}`
`169`	`174`