Bug: UI border of cards on dashboards

[ryanevans-dev]

Current Behavior

There is now an border around cards on the new HA UI, for example on the chip card there is an border which group them all, this was previously not the case.

Expected Behavior

For the border to be invisible or not present at all.

I suspect this is HA updates themselves causing this border rather than this integration, but can it be overridden?

Steps To Reproduce

Go onto HA dashboard
Add chip card (plus others)
You will see a faint border across the screen.

Context

No response

Environment

- Browser: Mobile App
- HA Version: 2022.11.2
- Mushroom: 2.1.3

Anything else?

No response

[piitaya]

Duplicate of #822 #813 #795 and already fixed. You need to update to the latest mushroom version.

[chench00]

@piitaya I am running v2.4.1 and still see the borders:

Do I need to add any extra code?

[piitaya]

Do you have this in your console ?

[chench00]

I see this in HACS:

[piitaya]

Look into your browser console. I think you have a cache issue 🙂

[chench00]

[piitaya]

Oh wait, is it in a stack-in-card card ? Stack in card is not fixed with the new border for cards : custom-cards/stack-in-card#47

[chench00]

I actually downloaded the updated .js card and uploaded into my configuration and the borders are gone but not around the chips.

[piitaya]

How did you do to remove the box shadow with the old version ? Can you share the yaml of your card?

[chench00]

I only uploaded the .js fine and the border disappeared. I didn't have to change anything.

[chench00]

@piitaya Any other suggestions?

Example:

    type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - views:
          - title: Home
        type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:mushroom-title-card
            title: Hallway
          - type: custom:stack-in-card
            mode: horizontal
            cards:
              - type: custom:mushroom-template-card
                icon: mdi:light-switch
                layout: vertical
                tap_action:
                  action: toggle
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                entity: switch.hallway
                icon_color: |-
                  {% set state=states('switch.hallway') %}
                  {% if state=='on' %}
                  orange
                  {% elif state=='off' %}
                  white
                  {% endif %}
                secondary: '{{ states(''switch.hallway'')}}'
                multiline_secondary: true
                primary: Hallway
    layout:
      height: 225px

[piitaya]

I don't use stack in card so I can not help with that 😔