search

pkissling / clock-weather-card

A Home Assistant Card indicating today's date/time, along with an iOS inspired weather forecast for the next days with animated icons
Other
303 stars 65 forks source link

Four digit time breaks out of container on mobile devices #379

Open dunxd opened 2 months ago

dunxd commented 2 months ago

Checklist:

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. Screenshot_20240505_101952_Home Assistant Javascript errors shown in the web inspector (if applicable):

Additional information:

dunxd commented 1 month ago

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.