[Bug]: card-mod-more-info-yaml completely ignored in HA 2026.3 - no <card-mod> element injected ?

[LordeXf]

My Home Assistant Version

Home Assistant Core: 2026.3.0
Card-mod: 4.2.1
Frontend: 20260228.0
Lovelace configuration: YAML (theme-based)

My card-mod installation method

HACS

My lovelace configuration method

YAML

What I am doing

I'm trying to vertical center more-info-yaml popups in theme.yaml with the new core.

This is what I had before, and it was working:

card-mod-more-info-yaml: |
   $: |
     .mdc-dialog__container {
       display: flex !important;
       justify-content: center !important;
       align-items: center !important;
     }

card-mod-more-info-yaml does not work in Home Assistant 2026.3+?
Card-mod fails to inject ANY <card-mod> element into the more-info dialog DOM, making it impossible to apply custom styles to more-info dialogs.

Browser Mod custom popups is working:

browser_mod:
  service: browser_mod.popup
  data:
    popup_styles:
      - style: all
        styles: |
          ha-dialog {
            --dialog-surface-margin-top: auto !important;
          }

Browser Mod popups can be styled and centered.

What seems to not working:

Any card-mod-more-info-yaml targeting

• Root element targeting (:host, .)
• Shadow DOM chains ($ $ $)
• Internal element targeting (ha-more-info-info $)
• Debug mode (card-mod-more-info-yaml with debug)

Nothing creates a <card-mod> element in more-info dialogs.

What I expect to happen

When card-mod-more-info-yaml is defined in a theme, card-mod should:

1. Inject a <card-mod> element into the more-info dialog's shadow DOM
2. Apply the specified styles to the dialog and its children
3. Allow customization of dialog positioning, appearance, and behavior

February 2026 (3 weeks ago) - Users still using old .mdc-dialog syntax, suggesting recent breaking change.

What happened instead

Actual Behavior

Card-mod does NOT inject any <card-mod> element whatsoever into <ha-more-info-dialog>.

Minimal steps to reproduce

Minimal Reproduction

themes/test.yaml:

test-theme:
  card-mod-theme: test-theme
  
  # These work fine on more-info dialogs ✅
  ha-dialog-scrim-backdrop-filter: blur(2px)
  mdc-dialog-scrim-color: rgba(0,0,0,0.05)
  ha-dialog-border-radius: 12px
  dialog-box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.3)
  
  # This is completely ignored - no  element created ❌
  card-mod-more-info-yaml: |
    $: |
      :host {
        --test-variable: red !important;
      }

Steps to reproduce:

1. F12 → Inspect <ha-more-info-dialog>
2. Search for <card-mod> element
3. Result: NOT FOUND

Include any yaml code here

## All Attempted Solutions (ALL FAILED)

# Attempt 1: Simple root targeting
card-mod-more-info-yaml: |
  $: |
    :host {
      --test: red;
    }

# Attempt 2: Direct dialog targeting
card-mod-more-info-yaml: |
  ha-dialog $ wa-dialog $: |
    dialog {
      margin: auto !important;
    }

# Attempt 3: Full shadow DOM chain
card-mod-more-info-yaml: |
  ha-adaptive-dialog $ ha-dialog $ wa-dialog $: |
    dialog {
      top: 50% !important;
      transform: translateY(-50%) !important;
    }

# Attempt 4: Broken chain (per troubleshooting docs)
card-mod-more-info-yaml: |
  ha-adaptive-dialog $:
    ha-dialog $:
      wa-dialog $: |
        dialog {
          margin: auto !important;
        }

# Attempt 5: Targeting internal elements
card-mod-more-info-yaml: |
  ha-more-info-info $ more-info-content $: |
    .container {
      color: red !important;
    }

Error messages from the browser console

By checking each box 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 searched Home Assistant logs for any relevant card-mod errors or warnings.
• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• Understand that 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.

[LordeXf]

Hello, I opened this thread.
But first, I would like to thx all the contributors for the great work.
I recently update HA and integrations and some settings needed to be changed and I'm facing this issue.

I used Claude to help to debug and try and errors, so, I apologies if I missed something.
I tried multiple ways to vertical center the more-info-dialogs, but nothing that I can do is working.

Perhaps, I missed an info or if I tried wrong...

Thx for your help.

[LordeXf]

Additional Discovery - Mobile Behavior Change

On Android devices, the more-info dialog behavior has also changed in HA 2026.3:

Before (HA 2026.2 and earlier):

• More-info dialogs displayed as centered popups (standard dialog behavior)

After (HA 2026.3):

• More-info dialogs now display as full-height bottom sheets
• Dialog slides up from the bottom of the screen
• Occupies entire screen height

This confirms that <ha-adaptive-dialog> is applying a "bottom sheet" pattern that:

• ✅ May be intentional for mobile (though different from previous behavior)
• ❌ Breaks desktop centering entirely (dialogs stuck at top)

Root cause: The --ha-bottom-sheet-height CSS variables found in <ha-adaptive-dialog> force this behavior on both mobile AND desktop, with no way to override via card-mod.

[dcapslock]

Yes, 2026.3 now uses ha-adaptive-dialog for more-info

Card_mod does not look for ha-adaptive-dialog so card_mod won’t work without an update. I am not contributing here any more but do not that Uix integration works correctly for Home Assistant 2026.3.

Once you do get styling working, you will need to adapt to having ha-adaptive-dialog as the firstt element with either ha-dialog or ha-bottom-sheet being in its shadow root. See here for more info.

I won’t comment further here but should you need further help you can create a Uix discussion.

[LordeXf]

Ok, thx @dcapslock

[LordeXf]

Solution confirmed: UIX works perfectly with HA 2026.3.

Working config for vertical centering of more-info dialogs:

uix-more-info-yaml: |
  .: |
    ha-adaptive-dialog {
      --ha-bottom-sheet-height: auto !important;
      --ha-bottom-sheet-max-height: none !important;
      --vertical-align-dialog: center !important;
      --dialog-surface-margin-top: auto !important;
      --dialog-surface-margin-bottom: auto !important;
      position: relative !important;
    }

[kosmaluk]

Rozwiązanie potwierdzone: UIX działa doskonale z HA 2026.3.

Konfiguracja robocza do pionowego centrowania okien dialogowych „więcej informacji”:

uix-more-info-yaml: |
.: |
ha-adaptive-dialog {
--ha-bottom-sheet-height: auto !important;
--ha-bottom-sheet-max-height: none !important;
--vertical-align-dialog: center !important;
--dialog-surface-margin-top: auto !important;
--dialog-surface-margin-bottom: auto !important;
position: relative !important;
}

u mnie to nie centruje okna wiecej informacji tylko dalej wyjeżdża od dołu i jest na dole ekranu :(

[LordeXf]

Code is only making the popup central in browser not on smartphone

[kosmaluk]

Kod powoduje, że wyskakujące okienko jest wyświetlane centralnie w przeglądarce, a nie na smartfonie

Ok rozumiem. A czy jest jakiś sposób by okna more info były centrowanie na telefonie tak jak dawniej? Nie podoba mi się tak na dole i jest dla mnie nie poręczne.
Obecne rozwiązanie rozwaliło mi też wszystkie inne okna dialogowe z różnych kart. Nie rozumiem tej zmiany a w szczególności brak wsparcia

[dcapslock]

Just a general note that more-info is now an adaptive dialog since Home Assistant 2026.3, so will show as a bottom sheet on small devices. For any feedback on that I suggest perhaps a Home Assistant feature request to be able to control whether the more-info dialog is an adaptive dialog, or more generally to use bottom sheets or not as this is becoming more the norm for Home Assistant dialogs, foillowing generally what most apps do on devices these days.

[kosmaluk]

Ok. Spróbuję złożyć prośbę o funkcje. Ale z tego co widzę to ta zmiana dotyczy wszystkich okien systemowych. Teraz wszystko jest na dole, nawet okienka z jedną linia tekstu co jest nie praktyczne dla mnie. Wyśrodkowane były wygodniejsze. Ponadto rozwaliły się też inne okna dialogowe w innych kartach np restriction-card, quick-timer itd

[ChrsCrss]

Yes, 2026.3 now uses ha-adaptive-dialog for more-info

Card_mod does not look for ha-adaptive-dialog so card_mod won’t work without an update. I am not contributing here any more but do not that Uix integration works correctly for Home Assistant 2026.3.

Once you do get styling working, you will need to adapt to having ha-adaptive-dialog as the firstt element with either ha-dialog or ha-bottom-sheet being in its shadow root. See here for more info.

I won’t comment further here but should you need further help you can create a Uix discussion.

Does this mean that this plugin no longer being developed?

[havy1601]

So this means this plugin is now abandoned?
Sad to hear as my config relied heavily on it.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Thank you for your contributions.