Add state-info ellipsis + fix height

[spacegaier]

Breaking change

Proposed change

1. Add ellipsis to state name
2. Remove fixed height to achieve the more compact design of name and relative-time we had before

=> Does it perhaps even make sense to use a hover-maquee for the name or is the intended solution to use the existing double click on the dialog header to go to a wider dialog if you need the whole name? Or add a tooltip with the whole name?

Before:

After:

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

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

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

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[Misiu]

@spacegaier I like the idea to make dialog wider by double-clicking on the dialog header (like here: #7492).
The whole name will be visible, but there is one extra benefit: the graph will be wider and more readable.
Just my 2¢.

[spacegaier]

@Misiu That option already exists today. My wording above probably was a bit misleading.