Change default min-width of MenuBar width of the overflow button

[rolfsmeds]

Describe your motivation

When the collapse-feature of MenuBar is used, one would often like the component to be able to shrink down to exactly the width of the overflow-button (rather than e.g. zero, which will clip the overflow-button).

Describe the solution you'd like

Change the MenuBar min-width to the width of the default overflow button (var(--lumo-size-m)).

Describe alternatives you've considered

No response

Additional context

No response

[eshan-one]

Hey @rolfsmeds can you please assign me this issue! I would like to work on this. We can have a discussion once you assign me this!

[rolfsmeds]

Be my guest, @eshan-one. This should be quite straight forward, just make sure you apply the CSS in the component's Lumo styles rather than the raw styles, and that you've read the contribution guidelines: https://vaadin.com/docs/latest/contributing/pr. As this is a very minor css tweak we won't need any tests or documentation.

[eshan-one]

Thanks for assigning! Will work on this!

[vursen]

Reopened. The previous solution was reverted due to causing unexpected menu bar collapse when used in Vaadin layouts.

Cross-posting @rolfsmeds's comment:

It technically makes it behave correctly, but will affect many existing applications due to the way width:100% is used in Vaadin layouts.

Thus, best to revert for now.

(A better solution might be to have the menu-bar calculate the width of its contents, and set that to be its width. That should allow it to try to render all items and only collapse if there is insufficient space. This would make it much easier to make the collapsing feature actually work – today it's a bit tricky.)