Four digit time breaks out of container on mobile devices

[dunxd]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser
• I read the FAQ and the issue I'm having was not mentioned there.

Release with the issue:
2.6.0
Last working release (if known):

Browser and Operating System:
Home Assistant Companion on Android

Description of problem:

Time with 4 digits and an/pm indicator breaks out of container and throws the rest of dashboard.

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

Additional information:

[dunxd]

Taking a look at the CSS for this on a desktop browser and wonder if the following changes might improve rendering on a smaller screen.

Just make the clock size a bit smaller

clock-weather-card-today-right-wrap-center {
    display: flex;
    height: 4rem;
    font-size: 3rem;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
}

Use media queries to make the time size smaller when the display is narrow such as a small phone:

@media only screen and (max-width: 450px) {
       clock-weather-card-today-right-wrap-center {
            font-size: 2.5rem;
       }    
}
@media only screen and (min-width: 451px) {
       clock-weather-card-today-right-wrap-center {
            font-size: 3.5rem;
       }    
}

There are probably better ways to tackle the issue than this.

I may find time to do a PR on this in the next couple of weeks, but thought I'd throw this out there just now in case someone is working on the CSS already.

[Jens-Wymeersch]

@dunxd I tried to effectively get the size of the clock smaller with what you wrote but this doesn't work for me. Anything else you found out ?