Popover match target width

[rolfsmeds]

Describe your motivation

It's fairly common to want a popover to match the width of its target (anchor) element. An example of this is a dropdown field whose dropdown should have the same width as the field itself.

While this is easy if the target has a fixed size, it's quite tricky to achieve if it doesn't.

Describe the solution you'd like

A way to set the Popover to match the width of its target, e.g. a boolean matchTargetWidth property / setMatchTargetWidth(boolean) method in Flow.

Describe alternatives you've considered

Another API solution that came to mind was to have a css property like --vaadin-popover-target-width that would be automatically set and updated by the Popover component, that could be use through the normal width property/setter.

Additional context

No response

[knoobie]

Should there also be some kind of min / max width to ensure the popup does not fall out of proportion; for example you create something similar to the GitHub Link Overlay / Popup and by default links are short enough that you wanna use their full width - but in a CMS some people also do shitty things.. so you end up with a popup that's 800px wide because of a really long link text.

[rolfsmeds]

True, although I guess arguably the same applies to popovers whose size is determined by their contents?
Perhaps it's sufficient that you can set max-width in a stylesheet?

[knoobie]

If that works: totally!

[knoobie]

Just stumbled upon this in the docs example.. it feels like a must have feature.. nobody wants to do pixel perfect matching of field and popover.. see for example: 340px + 325px.. that can't be real