search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
470 stars 82 forks source link

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

Open rolfsmeds opened 1 year ago

rolfsmeds commented 1 year ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

Thanks for assigning! Will work on this!

vursen commented 4 weeks ago

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.)