Unnecessary Line Wrapping in Lovelace Light Card

[shbatm]

Home Assistant release with the issue:

Hass: v0.100.0b1
Frontend: 20191002.0

Last working Home Assistant release (if known):

UI (States or Lovelace UI?):

Lovelace

Browser and Operating System:

Chrome / Windows 10

Description of problem:

For longer entity friendly names, the Light entity card is wrapping the name when there is plenty of room in the card to display the whole thing. It appears that there is no 'width' setting set on the name class. Adding something like width: 90%; or width: fit-content; in Chrome DevTools corrects the issue.

Before:

After:

Javascript errors shown in the web inspector (if applicable):

N/A

Additional information:
Suggest adding width: 90%; at this line

[shbatm]

Thought this might be because I am using the Light card inside a Horizontal Stack, but I confirmed the same issue occurs with a longer name on the full Light Card using the demo site:

[iantrich]

Sounds like an easy hacktoberfest issue if you want to take a stab at it

[shbatm]

Happy to submit the PR, but wanted to see what the preferred width setting would be--css is not my forte.

Is 90% good enough or should I be using some other variable/keyword?

[iantrich]

I think that's fine. Others might chime in when you submit a PR (css is not my forte either 😄 )

[JeroenGoddijn]

You can also just set
max-width: 90%;
Might make it more responsive..

[shbatm]

@JeroenGoddijn -- Tried this in DevTools and it had no effect.

[JeroenGoddijn]

Sorry, was just going off by what I saw in here... haven't had a chance to change my light dimmers to these cards yet..

Need to make some time to set up new clean dev environment and knock out some Hacktoberfest issues too... ;o)

[shbatm]

NP. I went with @bramkragten's suggestion in the PR (#3972)... Trying to knock out as many of my backlog issues for Hacktoberfest too

[iantrich]

@shbatm there's no shortage of them :)