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 ?

[puravida13]

any update on this? I'm having the same issue. The disadvantage with this is not just cosmetic. Since it's happening on displays like phones with touch screen, the touch inputs shift the column and create accidental screen taps.

[dunxd]

@Jens-Wymeersch I'm not really clear how to fork and test this myself so I haven't been able to try different things.

My idea is to use media queries to dynamically set the time font-size smaller if the screen width is below a certain size. An alternative approach would be to just reduce the clock font-size for all displays.

It might also be possible to use overflow to avoid the clock spoiling the overall layout, but this wouldn't look so good.