Zoom level incorrect on mobile devices

[AleXSR700]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [ ] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

2024.6.1-Full Android version(s): 12 Device model(s): Samsung S10+ Home Assistant version: 2024.6.1 Last working Home Assistant release (if known): 2024.5.x Description of problem, include YAML if issue is related to notifications: When opening app, zoom level on dashboard is incorrect (card outside visible area). In addition, three dots for editing are not visible on primary dashboard.

Second dashboard working:

Issue also reported in Android repo but was classified as frontend issue.

https://github.com/home-assistant/android/issues/4446

Describe the behavior you expected

Correct zoom level, i.e. cards do not go outside screen and menu dots are always visible

Steps to reproduce the issue

1. 2. 3. ...

What version of Home Assistant Core has the issue?

2024.6.1

What was the last working version of Home Assistant Core?

2024.5.x

In which browser are you experiencing the issue with?

Companion app and latest chrome

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[AleXSR700]

I suspect the card size is somehow no longer corrected for if the content is not "stabdard". Here a screenshot when trying the same card with the new sections view:

[ildar170975]

Are these custom cards?

[AleXSR700]

Are these custom cards?

Yes and no. The card is not custom. The contents are.

type: custom:auto-entities
filter:
  include:
    - type: divider
    - entity_id: sensor.erlangen_temperature
      options:
        name: ' '
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info.text-content {
                overflow: visible;
                margin-left: 0px;
                margin-right: 0px;
                text-align: center;
              }
              .text-content::before {
                content: "{{state_attr('sensor.erlangen_temperature','friendly_name').replace(' Temperature', '')}} ({{states('sensor.erlangen_temperature')}} °C | {{states('sensor.erlangen_humidity')}} %)";
                color: white;
              }      
              .text-content::after {
                content: "  (≙ {{ (100*e**(17.625*(243.04*(log((states('sensor.erlangen_humidity')|float)/100)+(17.625*(states('sensor.erlangen_temperature')|float))/(243.04+(states('sensor.erlangen_temperature')|float))))/(17.625-(log((states('sensor.erlangen_humidity')|float)/100)+(17.625*(states('sensor.erlangen_temperature')|float))/(243.04+(states('sensor.erlangen_temperature')|float))))/(243.04+(243.04*(log((states('sensor.erlangen_humidity')|float)/100)+(17.625*(states('sensor.erlangen_temperature')|float))/(243.04+(states('sensor.erlangen_temperature')|float))))/(17.625-(log((states('sensor.erlangen_humidity')|float)/100)+(17.625*(states('sensor.erlangen_temperature')|float))/(243.04+(states('sensor.erlangen_temperature')|float))))))/e**(17.625*(states('sensor.xiaomi_living_room_temperature')|float)/(243.04+(states('sensor.xiaomi_living_room_temperature')|float))))|round(1) }} % at {{states('sensor.xiaomi_living_room_temperature')}} °C )";
                color: white;
                font-size: 0.8em;
              }
              .state {
                display: none;
              }
              .value {
                display: none;
              }
              state-badge {
                display: none;
              }
    - type: divider
    - entity_id: climate.eq3_*
      sort:
        method: state
      options:
        type: custom:slider-entity-row
        min: 4.5
        max: 23
        step: 0.5
        hide_state: false
        name: ' '
        card_mod:
          style:
            .: |
              .state {
                white-space: nowrap;
                display: inline-block;
              }              
              .state::after {
                content: "({{states(config.entity.replace('climate.', 'sensor.').replace('_climate', '_valve'))}} %)";
                font-size: 0.9em;
                margin-left: 0px;
                margin-right: 0px;
              }  
            hui-generic-entity-row $: |
              .info.text-content {
                overflow: visible;
                margin-left: 0px;
                margin-right: 0px;
              }
              .text-content::before {
                content: "{{state_attr(config.entity,'friendly_name').replace('eQ-3', '').replace(' Climate', '')}}";
              }      
              .text-content::after {
                content: {% if state_attr(config.entity,'current_temperature') != none %} "({{state_attr(config.entity,'current_temperature')}} °C | {{state_attr(config.entity,'current_humidity')}} || {{states(config.entity.replace('eq3', 'xiaomi').replace('climate.', 'sensor.').replace('_climate', '_dewpoint'))}} °C)"{% endif %};
                font-size: 0.9em;
                #vertical-align: sub;
              }
    - entity_id: sensor.xiaomi_hallway_temperature
      options:
        icon: mdi:home-thermometer-outline
        name: ' '
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info.text-content {
                overflow: visible;
                margin-left: 0px;
                margin-right: 0px;
              }
              .text-content::before {
                content: "{{state_attr('sensor.xiaomi_hallway_temperature','friendly_name').replace('Xiaomi', '').replace(' Temperature', '')}} ";
                color: grey;
                font-style: italic !important;
              }      
              .text-content::after {
                content: "({{states('sensor.xiaomi_hallway_temperature')}} °C | {{states('sensor.xiaomi_hallway_humidity')}} %) || {{states('sensor.xiaomi_hallway_dewpoint')}} °C)";
                font-size: 0.9em;
                color: grey;
                font-style: italic !important;
                #vertical-align: sub;
              }
              .state {
                display: none;
              }
              .value {
                display: none;
card:
  type: entities
  state_color: true
view_layout:
  grid-area: card02

As I mentioned, this worked before and was broken with the recent updates.

[ildar170975]

Do you have any zoom problems with views which contain only stock cards w/o card-mod? You have plenty custom cards with modifications by card-mod which may cause these issues. Checking with stock cards may help you to localize a reason.

[AleXSR700]

I have dashboards which are identical views and have the same kind of cards BUT not such a wide one, i.e. the bottom one that shows outside the assigned card area. They are zoomed correctly.

So it seems that HA frontend no longer handles these kinds of cards correctly anymore. In previous releases, this card was handled correctly.

It seems like zoom level is now maybe based on a different criteria?

P.S.: I would assume that stock cards without any mods used are always correct because their size is limited by the system.

[kizovinh]

On my ipad companion app, it's always happened. Everytime I open the app ( if it is still running in the background ), it zoomed about 200%.