Panel view, 2024.4: no borders & box-radius for child cards

[ildar170975]

My Home Assistant version: 2024.4.1

Layout-card version (FROM BROWSER CONSOLE): 2.4.4

What I am doing:

Consider this card in a PANEL view (default HA theme):

type: custom:layout-card
layout_type: vertical-layout
cards:
  - type: entity
    entity: sun.sun
  - type: entity
    entity: sun.sun
  - type: entity
    entity: sun.sun

In editor everything looks OK:

In the view - no borders & box-radius applied for child cards:
Edit mode:

Normal mode:

In masonry - everything is OK:
Edit mode:

Normal mode:

Probably related to these changes:
home-assistant/frontend#20122
home-assistant/frontend#20135
home-assistant/frontend#20264

Error messages from the browser console:
none

---

By putting an X in the boxes ([X]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• Have made sure I am using the latest version of the plugin.
• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

Related: thomasloven/lovelace-card-mod#369

[bkr1969]

I find it very odd that the rendering is correct in the editor, but no rounded corners otherwise. I have added car-mod code to a few of the more important items, but would prefer not to have to add it to every single item.

[ildar170975]

Absolutely not odd since cards in a panel mode are rendered differently.

[e46lux]

My dashboard is a panel layout that contains a layout-card that subsequently has everything inside of it.

Resolved mine with the following addition in the theme yaml (my card_mod style wasn't getting inserted by applying card-mod to layout-card directly, so I had to go up a shadow root and drill into it via theme card-mod-view-yaml):

  card-mod-view-yaml: |
    hui-panel-view$: |
      * {
        --ha-card-border-radius: inherit !important;
        --ha-card-border-width: inherit !important;
        --ha-card-box-shadow: inherit !important;
      }

via element explorer > select layout-card element, filter for border > devtools told me that apparently layout-card was the first (top-most) element that is setting those values to 0, everything below inherits that value (0/none) via this style in layout-card:

* {
    --ha-card-border-radius: 0;
    --ha-card-border-width: 0;
    --ha-card-box-shadow: none;
}

[jeremynoesen]

My dashboard is a panel layout that contains a layout-card that subsequently has everything inside of it.

Resolved mine with the following addition in the theme yaml (my card_mod style wasn't getting inserted by applying card-mod to layout-card directly, so I had to go up a shadow root and drill into it via theme card-mod-view-yaml):

  card-mod-view-yaml: |
    hui-panel-view$: |
      * {
        --ha-card-border-radius: inherit !important;
        --ha-card-border-width: inherit !important;
        --ha-card-box-shadow: inherit !important;
      }

via element explorer > select layout-card element, filter for border > devtools told me that apparently layout-card was the first (top-most) element that is setting those values to 0, everything below inherits that value (0/none) via this style in layout-card:

* {
    --ha-card-border-radius: 0;
    --ha-card-border-width: 0;
    --ha-card-box-shadow: none;
}

This unfortunately does not work for me using a casted dashboard. It works for the dashboard when it is not casted though.

[jm-cook]

My dashboard is a panel layout that contains a layout-card that subsequently has everything inside of it.

Resolved mine with the following addition in the theme yaml (my card_mod style wasn't getting inserted by applying card-mod to layout-card directly, so I had to go up a shadow root and drill into it via theme card-mod-view-yaml):

  card-mod-view-yaml: |
    hui-panel-view$: |
      * {
        --ha-card-border-radius: inherit !important;
        --ha-card-border-width: inherit !important;
        --ha-card-box-shadow: inherit !important;
      }

via element explorer > select layout-card element, filter for border > devtools told me that apparently layout-card was the first (top-most) element that is setting those values to 0, everything below inherits that value (0/none) via this style in layout-card:

* {
    --ha-card-border-radius: 0;
    --ha-card-border-width: 0;
    --ha-card-box-shadow: none;
}

This works in a web browser but not on a google nest hub when casting.

[madkatz01]

Can someone explain how I add this to the theme yaml?