View Assist - Master Config > Dashboard Options > Display Settings > Status Icon Size not working

[jcrowegitHu8]

Hi, I'm assume the "status icon size" should make the "hold icon" smaller. This does not appear to happen. The hold icon takes up a significant portion of the screen blocking much of things like the view of the front door camera.

I'm using an Echo Show 8 with VACA 12.0 apk

[jcrowegitHu8]

Appreciate your help and really liking the product.

Update to provide more details of what I am experiencing. I have "home" as a launch icon and "small" status icon size. I don't fully know/understand how all the UI stuff fits together so these are my best guesses to the issue.

If I have traced the code correctly the issue appears to be that the status icon controls the grid size but not the icon size.

#################################
#Showing the only place that consumes var_assistsat_entity_responsive_status_icons_size is in grid size
#################################

#view_assist\dashboard\dashboard.yaml

var_assistsat_entity_responsive_status_icons_size: |
        [[[
          try {
            const baseSize = states[variables.var_assistsat_entity].attributes.status_icons_size || "6vw";

            if (window.viewAssistResponsive?.orientation === "portrait") {
              const numericValue = parseFloat(baseSize);
              const unit = baseSize.replace(numericValue.toString(), '');
              return `${numericValue * 1.5}${unit}`;
            }

            return baseSize;
          } catch {
            return window.viewAssistResponsive?.orientation === "portrait" ? "9vw" : "6vw";
          }
        ]]]

...
  status_icons_content:
    custom_fields:
      title: '[[[ return variables.var_title ]]]'
      status:
        card:
          type: custom:layout-card
          layout_type: custom:horizontal-layout
          cards:
            - type: custom:layout-card
              layout_type: grid-layout
              layout:
                margin: 0
                card_margin: 0
                place-content: end
                grid-template-columns: |-
                  [[[
                    const baseIconSize = variables.var_assistsat_entity_responsive_status_icons_size;
                    return `repeat(auto-fit, minmax(${baseIconSize}, ${baseIconSize}))`;
                  ]]]

#################################
#showing that icon_template is   size: 90%
#################################

#view_assist\dashboard\dashboard.yaml

 icon_template:
    template: variable_template
    color_type: card
    show_name: false
    size: 90%
    padding: 0px
    styles:
      card:
        - background-color: transparent
        - border-width: 0px
        - aspect-ratio: 1 / 1
      icon:
        - display: grid
        - color: white

Using a screenshot of a Firefox browser devtools with responsive size set to mimic Echo Show 8 (1200x800). It's not perfect as I didn't hide the header bar but the icon showing as 262px is much greater than 6vw =~76.8px it should be for the resolution. Same as what I see on the actual device.

[dinki]

Those Echo devices have been really difficult to deal with in terms of display.

You can experiment by changing the status_icons_size: value using dev tools for one of your VA satellite devices to something smaller until you find a value that is more suitable. Then you'd want to modify things here in the integration:

https://github.com/dinki/view_assist_integration/blob/3ec7d69dc5590d1d0ae0a24271152fb9ed655f40/custom_components/view_assist/typed.py#L57

[jcrowegitHu8]

Hi dinki, thank you for such a fast reply. Sorry I know I'm doing a very poor job explaining the issue. Let me know if you are able to reproduce with the following details.

Let me try this another way. I believe the HTML and CSS functionality of the resizing of icon is just straight broken.

Here is the only way I'm able to get the icon to be any other size.

In a Firefox web browser get to the view assistant screen. Open the web dev tools (see attached) image. Select the icon so you find it in the HTML dom. Notice that width: 90%. Manually edit that to be 30%. To be clear any change of the "status_icons_size" value from the device config or the master config has no effect.

I believe this is driven by
view_assist\dashboard\dashboard.yaml lines 585 here

icon_template:
    template: variable_template
    color_type: card
    show_name: false
--->size: 90%<----------
    padding: 0px
    styles:
      card:
        - background-color: transparent
        - border-width: 0px
        - aspect-ratio: 1 / 1
      icon:
        - display: grid
        - color: white

[dinki]

As far as I can see it is working as intended:

small

medium

large

combined

[jcrowegitHu8]

Appreciate your patient working with me on this. Thanks for the screen shots.

But given that this is just HTML and CSS. I think we can agree that the client meaning, browser or satellite device, is probably not the issue.

I think next steps are comparing version of the things that generate the HTML and CSS used.

Installation method Home Assistant OS
Core 2026.6.0
Supervisor 2026.06.2
Operating System 17.3
Frontend 20260527.4

HACS
View Assist Version: 2026.6.0
VACA Version : v0.12.0
Button Card Version :v7.0.1
Layout Card Version : 16

VACA Device:
Echo Show 8 -> lineage-18.1-20260418-UNOFFICIAL-crown

Here is the template editor code I used to get the HACS values

View Assist Version: {{ state_attr('update.view_assist_update', 'installed_version') }}
VACA Version : {{ state_attr('update.view_assist_companion_app_update', 'installed_version') }}
Button Card Version :{{ state_attr('update.button_card_update', 'installed_version') }}
Layout Card Version : {{ state_attr('update.layout_card_update', 'installed_version') }}

Below is FireFox 151.0.4 (64-bit) just for comparison to your provided screen shot.

[jcrowegitHu8]

My local work around while waiting for an official fix. As I'm not saying what I did below is the correct solution but got mine looking closer to the pictures that dinki provided above.

Icon_template changes:

To work around the icon floating center in the column

Line 380 OR button_card_templates: > body_templates: > styles: > status: right: 0vw (change to -6vw to push it closer to the side of the frame)

Results

[msp1974]

Tested on an ES8 and worked as expected with small, medium and large doing as designed. See in the original image that the menu was not enabled, so tested with that too and worked as expected.

Need to rework the layout of these icons as on larger screens it does layout incorrectly and not sure why. Will ensure full testing of the icon sizing across all screen sizes when we do that.