Frontend: Slider value label cut off

[zepfietje]

Checklist

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

The problem

Slider value labels are being cut off in various places.

Expected behavior

Label doesn't get cut off and is fully visible, even the part outside of cards.

Steps to reproduce

1. Add a number helper to a Lovelace entities card, or just open a light's details (e.g. brightness).
2. Drag the slider and see the slider value label being cut off at the top.

Environment

• Home Assistant release with the issue: 0.117.1
• Last working Home Assistant release (if known): -
• Browser and browser version: latest version of the Home Assistant Android and Mac apps
• Operating system: -

[spacegaier]

I can confirm that, as I had noticed the same a few days ago. Fix is on its way.

[zepfietje]

@bramkragten, https://github.com/home-assistant/frontend/pull/7651 fixed this issue only partly.
For (number helper) range sliders in a Lovelace entities card, the label still gets cut off.

[spacegaier]

@zepfietje This is how it looks for me. Not sure if there is a missing pixel on top or not. Looks the same to me compared to the light brightness slider.

[zepfietje]

@spacegaier, I'm talking about the Lovelace entities card, not the details card.

[spacegaier]

That was what I tested first and there it was fine on my end, so I moved on to the more-info 😄 .

Can you post a screenshot to illustrate the scenario you found? Does the number helper need to be at the top or something along those lines for the issue to appear?

[zepfietje]

@spacegaier, if you move the number helper to be the first entity in the card, the issue should occur. 😉

[spacegaier]

Please post a screenshot, because I cannot reproduce it.

[zepfietje]

[spacegaier]

Ah, an entities card without title 😄. No ideas, how to properly fix that. @bramkragten or other CSS wizards need to chime in here.

[zsarnett]

The reason it happens is that overflow is hidden on the ha-card element... But it's there for a reason.. I can take a look later potentially