Browser_mod v2 popups - hiding the top left close button

Configuration Frontend
1

This is driving me mad for the last few hours.

A bit of background, this is for a webhook popup that shows the intercom camera feed when the call button is pressed.

The popup is displayed on several devices, this all works great.

But now I am left with a popup with two close buttons. Top left just closes the popup locally and botton right closes globally with browser_mod.close_popup.

So I want to hide the top left close button, but it seems whatever I try, cannot hide it.

Using browser dev tools, if I select ha-button and type in console $0.style.display = 'none'. It hides the button. So it's just a matter of finding the correct path for card_mod.

Any help appreciated.

2

Can't help you without knowing what you're doing, post the YAML config.

3

Within this script, trying hide the popup's top left close button.

Screenshot 2026-06-15 054919
Screenshot 2026-06-15 0549191048×1069 82.8 KB

alias: Intercom Popup
sequence:
  - action: browser_mod.popup
    data:
      browser_id:
        - Study_PC
        - Snug_Tablet
      title: Front Gate Intercom
      dismissable: false
      autoclose: false
      timeout: 120000
      right_button: Close
      right_button_action:
        service: browser_mod.close_popup
        data:
          browser_id:
            - Study_PC
            - Snug_Tablet
      content:
        type: vertical-stack
        cards:
          - type: custom:webrtc-camera
            url: intercom_sub
            muted: true
          - type: custom:button-card
            name: Open Gate
            show_icon: false
            tap_action:
              action: perform-action
              perform_action: lock.unlock
              target:
                entity_id: lock.akuvox_r20k_relay_a
4

Sorry I have posted the YAML without the card_mod code.

alias: Intercom Popup
sequence:
  - action: browser_mod.popup
    data:
      browser_id:
        - Study_PC
        - Snug_Tablet
      title: Front Gate Intercom
      dismissable: false
      autoclose: false
      right_button: Close
      right_button_action:
        service: browser_mod.close_popup
        data:
          browser_id:
            - Study_PC
            - Snug_Tablet
      card_mod:
        style: 
          ha-dialog$: 
            ha-dialog-header$: |
              ha-icon-button { 
                  display: none !important
              }
      content:
        type: vertical-stack
        cards:
          - type: custom:webrtc-camera
            url: intercom_sub
            muted: true
          - type: custom:button-card
            name: Open Gate
            show_icon: false
            tap_action:
              action: perform-action
              perform_action: lock.unlock
              target:
                entity_id: lock.akuvox_r20k_relay_a
5

I spent many more hours on this. I have been unsuccessul in removing the button using card_mod. I suspect that is being injected after the card has been rendered.

Anyway the core issue is that dismissable=false means that the user should not be able to dismiss the popup according to the documentation (without use of action buttons). So I have logged that as a bug.

Anyway for now, I have a work around.

Screenshot 2026-06-15 091527
Screenshot 2026-06-15 0915271030×1151 78.5 KB

6

Just to close this down, I have had a reply from the developers

Thanks for the report. With the recent changes in Frontend dialogs, now that the navigation icon is in a slot, Frontend will show a close icon if there is nothing in the slot. The fix will be to render an empty div in the slot to prevent the default close icon showing.

Which explains why I was having no sucess with card_mod.

This is being/been fixed in v3

7

Glad to be able to help with this.

For completeness, below is what would have been needed to hide the slot itself. This is assuming non-adaptive dialog.

card_mod:
  style:
    ha-dialog $: |
      wa-dialog slot[name="header"] ha-dialog-header slot[name="headerNavigationIcon"] {
        display: none;
      }