Card editor: dropdown list is displayed beyond accessible area

[ildar170975]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

When I open a Map card in the UI editor, I see that the bottommost part od a dropdown list is not accessible:

Probably it may happen with other cards too.
This is an example with Entities card:

Describe the behavior you expected

The bottommost part of the dropdown list is accessible.

Steps to reproduce the issue

1. Add a new Entities card.
2. Open a dropdown list with MANY entries.
3. Check if the bottommost part of the list is accessible.

What version of Home Assistant Core has the issue?

2023.4.0

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome

Which operating system are you using to run this browser?

Win10x64

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[karwosts]

I looked at this once, I feel like it is somewhat related to this PR, but I'm a bit out of my depth.

vaadin/web-components#5432

When I looked at what is happening in the debugger, we seem to have a hardcoded "requiredVerticalSpace" of 200.

from vaadin/overlay/src/vaadin-overlay-position-mixin.js

    __shouldAlignStartVertically(targetRect) {
      // Using previous size to fix a case where window resize may cause the overlay to be squeezed
      // smaller than its current space before the fit-calculations.
      const contentHeight =
        this.requiredVerticalSpace || Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
      this.__oldContentHeight = this.$.overlay.offsetHeight;

The fact that this variable is nonzero overrides the calculation based on the actual measured overlay size. This means the box only opens vertically if we have less than 200 pixels below the dropdown box.

If I hack "requiredVerticalSpace" to zero, the overlay height is calculated instead of using the hardcoded 200 value (e.g. calculated at 508 pixels for 8 items), and the dropdown seems to behave much better, but I don't know if that's appropriate or the right way to fix this or not, and I'm not sure exactly the appropriate mechanism to do that.