🔹 Browser_mod - turn your browser into a controllable device, and a media_player

[dcapslock (Darryn Capes-Davis)]

@slimak

hui-dialog-web-browser-play-media). In Core 2026.3.1, the image area has been enlarged and doesn’t fit on my screen - I have to scroll vertically. Maximizing the popup window would likely solve this issue; is this possible? I’m not asking about full screen mode, but about enlarging these popup windows, especially vertically.

UIX (https://uix.lf.technology) has dialog support where dialogs can be styled using UIX theming. In you case you would start with something like the following which is light DOM styling but likely what you need to style the dialog vis CSS vars.

As this dialog uses “large” and UIX can’t change that, you can trick the width by styling --ha-dialog-width-lg. You also need to style --ha-dialog-width-full.

Height can be adjusted with --ha-dialog-min-height.

Border radius you be adjusted with --ha-dialog-border-radius

So the following will get the media play dialog pseudo “fullscreen”. There is further you could do like remove title, float close icon over the top etc. but this would need shadow root. If you wish to go further pick this up in UIX thread or UIX repo discussion.

  # theme yaml assumed
  uix-dialog: |
    :host(.type-hui-dialog-web-browser-play-media) {
       /* CSS for ha-dialog when it is in shadow root of hui-dialog-web-browser-play-media */
      --ha-dialog-width-lg: 100vw;
      --ha-dialog-width-full: 100vw;
      --ha-dialog-min-height: var(--safe-height);
      --ha-dialog-border-radius: 0;
    }

[slimak]

Great, thanks! The media dialogs are now maximized. To make the content fit vertically, I also added this:

      audio, img, video {
        height: 100%;
      }
      img {
        width: unset;
      }

[dcapslock (Darryn Capes-Davis)]

@slimak

To make the content fit vertically, I also added this:

      audio, img, video {
        height: 100%;
      }
      img {
        width: unset;
      }

Neat. If you don’t mind I will add these to the uix-guide I will write.

[Sofa_Surfer]

@dcapslock

o style width use —popup-width

Thank you, I will play around that!

[Sofa_Surfer]

I have solved this way, and restored alsothe blur effect on the background:

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    style: |
      --popup-min-width: 60vw;
      --popup-max-width: 90vw;
    card_mod:
      style:
        .: |
          ha-dialog {
            --dialog-surface-margin-top: auto !important;
            --ha-dialog-scrim-backdrop-filter: blur(5px);
            --mdc-dialog-scrim-color: rgba(0, 0, 0, 0.5);
          }
          @media (max-width: 430px) {
            ha-dialog::part(dialog) {
              width: 95vw !important;
              min-width: 95vw !important;
              max-width: 95vw !important;
            }
          }

I’m trying to use the @media query to adapt the popups to my iphone dashboard, still have some problems, any hint?

[dcapslock (Darryn Capes-Davis)]

@Sofa_Surfer

ha-dialog::part(dialog) {

This is not correct. wa-dialog has part dialog but not ha-dialog.

@Sofa_Surfer

style: |

Put your media queries in style - all the string here is wrapped with :host { } so that will work fine and then style the size with --popup-width and perhaps min/max as well.

See hass-browser_mod/documentation/styles.md at 04f1273634e4ab43c6d672d33083e3e8d7387bb1 · thomasloven/hass-browser_mod · GitHub. While this describes using the newer popup_styles the same applies for the old style key.

[firstcolle]

See pinned issue in repo. Specifically, dialog in wa-dialog shadow root styles border none so if you wish to style border either style fully on dialog with border full form or make sure to include border-style as well as other border parameters

I’ve read it, but I can’t seem to put the border back. Any advice? Thanks.

card_mod:
  style:
    ha-dialog$: |
      :host {
      --ha-dialog-scrim-backdrop-filter: blur(5px);
      }
      .mdc-dialog__surface {
          border: none !important;
          border-style: solid !important;
          border-color: white !important;
        }

[dcapslock (Darryn Capes-Davis)]

@firstcolle

.mdc-dialog__surface

No longer mdc dialog. Popups (ha-dialog) now use wa-dialog.

So you can style the final Browser dialog border with…

  card-mod-yaml: |
    "$ wa-dialog $": |
      dialog.dialog {
        border: 2px solid orange;
      }

Recommend you migrate to UIX where you can use uix_path to find the path of what you need to style Even though am at ease looking in the DOM and working out what the path, uix_path() got me the theme boilerplate in one step.

[DevoliaEsp]

Hi everyone,
I’ve been trying to do things on my own, but I can’t seem to accomplish what I’m trying to do, so I come here for help.
I have a popup displaying the changelog from each new HA release, so the size of this popup change (or should) depending if there’s a new release of HA or not.
Until 2026.2, it was changing no problem, but since 2026.3 and all the changes that came with it, I can’t achieve this anymore.
I use " --popup-max-width:" and “–popup-min-width:” to size my popup, but when I look at the CSS being used to scale my popup, I see that only “–popup-min-width:” is being used to calculate the size of my popup.
How can I set a min and a max value for my popup to dynamically scale for the content inside ?

[dcapslock (Darryn Capes-Davis)]

@DevoliaEsp

How can I set a min and a max value for my popup to dynamically scale for the content inside ?

The Home Assistant dialog now have fixed sizes. Default is medium and this is what Browser Mod uses. If you set --popup-width this overrides the medium dialog size. So you need to set a width with --popup-width. The max width then limits the width. So you could set width at a fixed pixel size and then max width as a percentage of view width.

[Protoncek]

I’m playing with checking if browser is registered or not… and it seems that i don’t quite understand “browser_entities”…
I created a badge where it says whether browser is registered or not. This badge

type: custom:browser-mod-badge
show_name: false
show_state: true
show_icon: true
entity: browser_entities.browserID

shows “Browser not registered” if it’s not, or it shows registered name otherwise. This badge does all i want: shows status, and / or registers new browser. However, it seems that i can’t transfer this into a “normal” card (say, my favorite custom button card), i keep getting entity not found (but in a badge it IS found…).
Is there any way to do so?, or, should i ask: what am i missing?

[dcapslock (Darryn Capes-Davis)]

@Protoncek

i keep getting entity not found (but in a badge it IS found…).
Is there any way to do so?, or, should i ask: what am i missing?

Browser Mod tile and badge are special in that they convert the generic browser_entities.XXX into the local sensor before rendering a stock tile/badge. So browser_entities.browserID won’t work in any card/badge except Browser Mod tile and badge.

You can try and fashion your own button card with JS templates. Look at window.browser_mod.registered and then you get the local sensor IDs by looking up window.browser_mod.browserEntities.

[Protoncek]

@dcapslock

Browser Mod tile and badge are special in that they convert the generic browser_entities.XXX into the local sensor before rendering a stock tile/badge.

ahhhh…i totally missed browser mod tile card. It suits me just fine, as my goal is achieved: i have a card which is positioned anywhere on dashboard, not at the top “badges” section. I generally don’t use badges at the top, that’s why i searched for “normal” card. This card’s behaviour is pretty interesting, though: if browser is not registered then clicking on the card shows window when i can enter and register browser, while if it IS registered it only shows “more-info”, but i can’t (don’t need to, too) change browser’s ID).

Quite great work! Thanks!

[dcapslock (Darryn Capes-Davis)]

Yes. All by design. Also if you have a device that often loses browser id, just add the user to privileged users (check doco) and that user can change browser id. Normally only admins get access to change form on click.

[dcapslock (Darryn Capes-Davis)]

Quick note that Brower Mod 2.10.1-beta.3 has a few fixes for Home Assistant 2026.4.0b0 due to timings of dialogs.

1. Frontend settings popups will not appear first clic, but do second.
2. Popup buttons will not always be spaced evenly and may be all on right (which is Home Assistant default).

[FortranFour]

2.10.1 will not perform a script action from within a popup window itself, whereas prior versions would. For example, when a thumbnail is tapped, this card will successfully call a script to open a larger popup window showing mail delivery, as it has always done:

  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: picture-entity
        entity: sensor.mail_last_delivery
        camera_image: camera.10_0_4_109
        show_name: false
        show_state: true
        show_recordings: false
        tap_action:
          action: perform-action
          perform_action: script.mail_delivery_popup
        hold_action:
          action: none
      - type: picture-entity
        entity: sensor.mail_last_retrieved
        camera_image: camera.10_0_4_109_2
        show_name: false
        show_state: true
        show_recordings: false
        tap_action:
          action: perform-action
          perform_action: script.mail_retrieval_popup
        hold_action:
          action: none

The prior behavior was that tapping within the popup picture-entity card would call a corresponding script showing mail collection, but no longer does so, instead simply closing the popup window:

alias: Mail Delivery Popup
sequence:
  - data:
      content:
        type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:stack-in-card
            mode: vertical
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                }
            cards:
              - type: picture-entity
                entity: sensor.mail_last_delivery
                camera_image: camera.10_0_4_109
                show_name: false
                show_state: true
                show_recordings: false
                tap_action:
                  action: perform-action
                  perform_action: script.mail_retrieval_popup
                  target: {}
                hold_action:
                  action: none
              - type: custom:multiple-logbook-card
                desc: true
                entities:
                  - entity: binary_sensor.mailbox_slot_door
                    hidden_state:
                      - unavailable
                      - "off"
                title: " "
                show:
                  state: false
                  duration: false
                  start_date: true
                  end_date: false
                  icon: false
                  separator: false
                history: 30
                max_items: 10
                collapse: 5
                no_event: " "
                hidden_state:
                  - unavailable
                  - "off"
                date_format: ddd, MMM D, YYYY, h:mm a
                card_mod:
                  style: |
                    ha-card {
                      background: none;
                      box-shadow: none;
                    }
                visibility:
                  - condition: numeric_state
                    entity: sensor.mail_last_delivery_absolute_days
                    below: 11
      size: classic
      title: Last Delivery
    action: browser_mod.popup
mode: single
icon: mdi:email-outline

HA Core 2026.3.4
HA Operating System 17.1
HA Supervisor 2026.03.2

Thanks for any assistance.

[dcapslock (Darryn Capes-Davis)]

@FortranFour

The prior behavior was that tapping within the popup picture-entity card would call a corresponding script showing mail collection, but no longer does so, instead simply closing the popup window:

Recent changes in dialogs in Home Assistant Frontend has meant there are different timings which mean that code that is resusing the standard popup tag (none) may have issues as code to show popup will close existing popup of same tag (none) if open, but the flag for open and whether the close sequence has completed is where the timing can be an issue and the new popup opened is then closed.

If you can make a real simple config with cards and script that would help me replicate the issue faster and update to cater for the issue.

In the meantime, an easy workaround is to give each popup its own tag.

[FortranFour]

Thanks for the immediate response. I’m not sure what you mean by “give each popup its own tag.” I have the popups embedded in scripts, each with unique names. (The issue seems unique to v2.10.1, not resulting from changes to HA, as I can revert to v2.10.0 and the new issue goes away.)

[dcapslock (Darryn Capes-Davis)]

@FortranFour

Thanks for the immediate response. I’m not sure what you mean by “give each popup its own tag.”

2.10.1 has fixes relating to popups and reuse of same tag, which has caused your issue. You may wait until I have time to review or try the tag workaround.

The workaround is to give different popups a tag tag: my-tag. See Multiple Popups

[FortranFour]

Thanks, again, appreciate it. I’ll give the tags a try.