Tile card: State text thats below the baseline gets cut off in Firefox

[envy]

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.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

I have a tile card that has the text "Sonnig" in it's state text display. The g is cut off.

This happens not on all zoom levels, the picture above is at normal 100%.
This is at 110%:

In Edge, 100% looks like this:

Both Firefox and Edge give a height of 14.4 for the span, but 16 for the state-element child. I'm suspecting that this is the cause?

Firefox:

Edge:

Describe the behavior you expected

The g is fully visible.

Steps to reproduce the issue

1. Create a tile card and use an entity which state has a text rendering that has a character that goes below the baseline.

What version of Home Assistant Core has the issue?

2025.12.5

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Firefox 146.0.1

Which operating system are you using to run this browser?

Windows 11

State of relevant entities

Problem-relevant frontend configuration

JavaScript errors shown in your browser console/inspector

Additional information

No response