Bad "Horizontal/Vertical stack cards" after 2024.3.0 update

[pickonedev]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• 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

On some devices/computers, everything works well, but on my older huawei tablets with android 10, the vertical and horizontal stack are doing something strange, are cutting the padding around elements, or something similar.

This is how the page should look and it is looking on some newer tablets (Android 12)

And this is how the vertical and even horizontal stack, it is acting on older Android 10 tablets

I waited new updates but nothing repaired the problem, I deleted browser cache and all, still nothing.
I am using Fully Kiosk Browser on my all devices.

Any solution?

Describe the behavior you expected

It should look exactly like in the first image, on all the devices

Steps to reproduce the issue

...

What version of Home Assistant Core has the issue?

core-2024.3.x

What was the last working version of Home Assistant Core?

core-2024.2.5

In which browser are you experiencing the issue with?

Fully Kiosk Browser 1.55

Which operating system are you using to run this browser?

Android 10

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

[ildar170975]

What kind of cards are you using? Are they custom cards?

[pickonedev]

Does not matter what cards I use, original or custom...
It is because of the stack cards...

These three cards, inside the vertical stack card:

type: vertical-stack
cards:
  - type: entity
    entity: sensor.date
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.lights_group_computer
  - type: gauge
    entity: sensor.tuya_cb_ac_bedroom_balcony_energy

On Huawei tablet with Andoird 10, it is looking like this

And this is how it should look, as it is on my newer tablets

[ildar170975]

Have you tried purging a frontend cache on devices?

[pickonedev]

Yes, I done everything, I have even restarted the tablets to factory...

On some similar older tablets, the frontend was showing good, but after I removed the browser cache or restarted tablet to factory, has started to look bad as well :-) (but only on those huawei tablets with android 10)

[karwosts]

Please use safe mode for your screenshots to reproduce. Your frontend looks heavily themed/custom and we don't triage those issues.

[pickonedev]

Please use safe mode for your screenshots to reproduce. Your frontend looks heavily themed/custom and we don't triage those issues.

I have just added two new photos in a message a bit upper, with only 3 cards inside a stack card

[karwosts]

That is not a safe mode screenshot. It doesn't matter that you don't use a custom card, the mere existence of any custom card in resources can break an infinite number of things.

[pickonedev]

Alright.

Look, this screenshot it is from computer's browser, cards have a gap/padding between, which is ok, this is how it should look...

And this is from the huawei tablets with android 10. There is no padding between cards....

This is the code

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.mpower_gaming_headsets_charger
  - type: entity
    entity: >-
      sensor.windows_asus_rog_strix_z790_e_gaming_wifi_ii_nuvoton_nct6798d_voltages_vcore
  - type: light
    entity: light.xiaomi_gateway_light
  - type: markdown
    content: >-
      The **Markdown** card allows you to write any text. You can style it
      **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and
      more.


      For more information see the [Markdown
      Cheatsheet](https://commonmark.org/help).

[pickonedev]

If I don't use Stack cards, all the cards have gap/padding between them. Only when I use cards inside Stack cards, the problem appears...
This is why I blame the stack cards

[ildar170975]

Can the gap property added recently cause this?

Is this property supported in Android 10?
https://caniuse.com/?search=gap

[pickonedev]

I don't know if is supported in my tablet (I will make a test and check it)
I use Fully Kiosk Browser on all my tablets, Andoid 10 and Android 12. But problems I get only with Android 10 tablets...

So... there is something new added, about this issue which I have... If this was the only think added, this could be the problem.
Maybe a condtition which check what device/os/browser you use, and let your device use the proper code, could help.
It is clear that something from the new HA version, has broken the look on some devices

[ildar170975]

Maybe a condtition which check what device/os/browser you use, and let your device use the proper code, could help.

Would be great. Otherwise we have situations like a recent "my sliders are not shown".

[pickonedev]

I have done the test, seems that the tablet does not know about the "gap" css :-(

[pickonedev]

This code

<div style="background:red;margin:10px">Margin of 10 px</div>
<div style="background:green;margin:20px">Margin of 20 px</div>
<div style="background:red;margin:10px">Margin of 10 px</div>
<div style="background:green;margin:20px">Margin of 20 px</div>
<div style="background:blue;gap:10px">Gap of 10 px</div>
<div style="background:yellow;gap:10px">Gap of 20 px</div>
<div style="background:blue;gap:10px">Gap of 10 px</div>
<div style="background:yellow;gap:10px">Gap of 20 px</div>

Result this on my tablet

[pickonedev]

Can the gap property added recently cause this?

Is this property supported in Android 10? https://caniuse.com/?search=gap

Still... I have a question about this...

"Gap" is related to the compatibility of browser, right? But, it is about OS as well?

I ask this because in your photo I only see compatibility of "gap" regarding browsers, not OSs as well... And if is only about browsers, how come that it is working on some newer tablets, with the same browser?

[pickonedev]

If helps: When I look with Browser Mod, for the details which sees about the browser I use on these tablets, it is not showing me this:

Edit: Another strange thing, I have made the "gap" test to a newer tablet with android 11, where everything is fine, all the stack cards ar ok, even after I have removed the browser cache, and the "gap" test failed, but everything show good...

Edit2: If there is any other test that I can do, please tell me and I will do everything, only to solve this issue.

Edit3: If you ask me, the best way for this stack cards, should be in adding a new variable to the card, for user to choose if he wants a gap or not, or to set it how big he wants, something similar to this:

type: vertical-stack
title: Backyard
gap: 10px
cards:
  - type: picture-entity
    entity: camera.demo_camera
    show_info: false
  - type: entities
    entities:
      - binary_sensor.movement_backyard

[pickonedev]

I'm back with another test I made:

• Fully Kiosk Browser on Android 10 Huawei tablet = Bad display (no padding between cards inside Stack cards)
• Default standard browser of Android 10 Huawei tablet = Good display (there are paddings and everything)

I have tested on Android 11 + Fully Kiosk Browser and everything is good.

Seems that only on Andoird 10 + Fully Kiosk Browser, I meet these problems.

There is any chance that this issue could be fixed in the next update? Or what I should do next?

[pickonedev]

A small conclusion: I think the problem is because of the old webview of the android, not the OS or browser.
I changed the webview to a rooted tablet and everything is ok, but still, the other unrooted tablets, ar not ok :-(