Add ResizeObserver to EntityRow

[andrist]

Proposed change

Add observer to entity-rows so elements hidden due to space constraints
do not stay hidden when the window is resized (enlarged).

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes input_number: missing/disappearing current values and units of measurement #2905
• This PR is related to the discussion at: https://community.home-assistant.io/t/input-number-slider-not-showing-number/118241/12 (numbers on sliders being hidden depending on browser width)

Checklist

• The code change is tested and works locally.
• [X ] There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

[andrist]

@bramkragten, @emufan please point me at instructions for testing this locally.

[spacegaier]

Has this any relation to this merged PR #8310?

EDIT: Only partially. The PR I mentioned sets new width values, but this one here will add an observer to react to updates.

[spacegaier]

@bramkragten, @emufan please point me at instructions for testing this locally.

What exactly do you mean? Didn't you do these changes in your local dev HA instance?

[spacegaier]

This resolves the conditional row issue for me now. Do we need the same for hui-number-entity-row.ts as well? There we also have a similar clientWidth check currently.

[bramkragten]

This resolves the conditional row issue for me now. Do we need the same for hui-number-entity-row.ts as well? There we also have a similar clientWidth check currently.

Yes, that is a direct copy of this element...

[andrist]

@bramkragten, @emufan please point me at instructions for testing this locally.

What exactly do you mean? Didn't you do these changes in your local dev HA instance?

No, not yet. I'll look for instructions on setting up a local dev instance then (don't have one yet).

[andrist]

Has this any relation to this merged PR #8310?

• number slider: change column width check from 350px to 300px #8310 aligns the minimum width for showing the number with the jump in layout
• this PR aims to update the behavior when the browser window is resized.

(Context: Currently if the page is opened with a small window, there is no way to get the numbers shown by resizing, without a reload).