vertical-stack, horizontal-stack - no gap in old Safari

[ildar170975]

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

Consider this:

type: vertical-stack
cards:
  - type: entity
    entity: sun.sun
  - type: entity
    entity: sun.sun

Shown properly in:
-- Chrome 133.0.6943.99 + Win10x64
-- iOS Companion App on iPad Air 2 (iOS 15.7.x)

But there is no gap in Mac 10.15.7:

Same with iOS Companion App on iPhone 5S (iOS 12.5.7).
Same with horizontal-stack.

Managed to hack this on Mac by setting display: grid for div#root:

Not sure if this is a proper solution - but may be some kind of mediaquery (or another adaptive way) should be used for old clients?

Describe the behavior you expected

Same nice look as in modern browsers.

Steps to reproduce the issue

as above

What version of Home Assistant Core has the issue?

2025.2.4

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Safari

Which operating system are you using to run this browser?

Mac OS 10.15.7

State of relevant entities

Problem-relevant frontend configuration

Javascript errors shown in your browser console/inspector

Additional information

No response

[ildar170975]

I recall this was already discussed: #20192 (comment)
According to https://caniuse.com/?search=column-gap, column-gap for grid is provided (partially) for older version of Safari than for flex.