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

arganto · February 16, 2026, 11:11am

Thanks for the heads up. OT Now I’m more as afraid, what this will mean for the old but more than great and working history explorer (more info replacement). Omg.

dcapslock · February 16, 2026, 11:33am

Could be impacted if the history explorer plugin relies on certain more-info DOM elements, CSS etc, as they will have changed. history explorer does not use ha-dialog.

dcapslock · February 25, 2026, 10:47am

Breaking changes in 2.8.0 (beta.2 available) in line Home Assistant 2026.3

As I am ahead (time wise) of most of you it is now evening and bed time. But to keep the eager beavers ready for Home Assistant 2026.3.0b0, Browser Mod 2.8.0-beta.2 is availlable to cater for the dialog changes that will come out with 2026.3.0b0.

I have put together a guide of what you may need to change if you do advance styling of your popups. Hopefully everything is covered and I wish you happy testing.

github.com/thomasloven/hass-browser_mod

[Info]: Popup styling changes for Browser Mod 2.8.0(-beta.2)

opened 11:43PM - 17 Feb 26 UTC

closed 11:43PM - 17 Feb 26 UTC

dcapslock

Browser Mod 2.8.0(-beta.2) now uses the new ha-dialog updated in Home Assistant …2026.3.0(b0). Dialogs now use webawesome rather than material design. This change means custom popup styling which worked before 2.8.0(-beta.2) may no longer work. Below are known styling updates required after updating to Browser Mod 2.8.0(-beta.2). ## Fullscreen on mobile, classic versus other `ha-dialog` sets mobile size styles when the dialog has a property type of `standard`. This interferes with `classic` style. Browser Mod works around this by setting `ha-dialog` type to empty `""` when style is `classic`. ## Dialog surface background Set using `--card-background-color`. If you then want actual card background color to be different than dialog surface, also set `--ha-card-background-color`. These can be set via general styling included with Browser Mod. ```yaml type: custom:popup-card title: Red popup card: type: markdown content: I have a red background and white text. popup_card_id: red-popup popup_styles: - style: all styles: |- ha-dialog { --card-background-color: red; --ha-card-background: red; --primary-text-color: white; color: white; } ``` ## Backdrop color and filter Backdrop color can be controlled with `--wa-color-overlay-modal` e.g. `--wa-color-overlay-modal: rgba(255,0,0,0.3);` for red at 30% opacity. This can be set using regular Browser Mod styling. At this time. Backdrop filter needs to be applied directly to `dialog` element via dialog::backdrop pseudo class. There are no current vars provided by webawesome or Frontend. Following example uses card_mod to set backdrop colour and filter. As card_mod is needed for filter it is used for color as well. ```yaml card_mod: style: .: | :host { --wa-color-overlay-modal: rgba(255,0,0,0.3); } ha-dialog $ wa-dialog $: | dialog::backdrop { backdrop-filter: blur(5px); } ``` ## Vertical alignment Popup vertical centering no longer is based on flex, since the popup is ulyimately the Browser's inbuilt `dialog` show in Browser's [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer). ### Vertical centering Vertical centering is now set by altering `--dialog-surface-margin-top`. The default is 40px. Setting this to auto, `--dialog-surface-margin-top: auto`, in standard Browser Mod [styles](https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md) will center the popup vertically. ```yaml ... popup_styles: - style: centered include_styles: - classic styles: | ha-dialog { --dialog-surface-margin-top: auto !important; } ``` See the [Example - centered](https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md#vertically-centered-style-centered) example in styles document for more details. ### Move to bottom To move to bottom you need to set top: unset, bottom: 0 of the actual `dialog` element so this needs card_mod. e.g. ```yaml card_mod: style: ha-dialog $ wa-dialog $: | dialog { margin-top: 0 !important; top: unset !important; bottom: 0 !important; margin-bottom: 20px !important; } ``` ## Slide-in or other animations As with mdc dialogs, ha-dialog animations need card_mod to target the `dialog` element of `wa-dialog`. Animations can be slightly problematic for wa-dialog as it has its own animation for show/hide (and pulse if dimiss is blocked). Setting animation times to 0 mostly solves this but you may see the popup briefly before animation, which was similar with mdc dialogs. The following is generally working well. card_mod: style: .: | ha-dialog { --dialog-surface-margin-top: auto !important; /* vertically centered */ --ha-dialog-show-duration: 0; --ha-dialog-hide-duration: 0; } ha-dialog $ wa-dialog $: | @keyframes slide-in { from { transform:translateX(100%) } to { transform: translateX(0); } } dialog { animation: slide-in 0.3s forwards; }

dcapslock · March 4, 2026, 10:15am

Browser Mod 2.8.0 requires Home Assistant 2026.3

Posting here that although Browser Mod 2.8.0 is released it does need Home Assistant 2026.3 which will be released shortly.

If you somehow manage to update before upgarding to 2026.3 (HACS will prevent update) you will get issues as 2.8.0 only works with the new ha-dialog in 2026.3 and no older versions and it not backward compatible.

Release notes has this version requirement information at the top.

image969 · March 4, 2026, 6:16pm

Hello,

Pretty much all of my card mod(besides rounded corners) was because I was fighting against the iPhone bug always forcing full screen. I haven’t messed with that in a while because I got it looking perfect

When I update all of this, I’m wondering if I will even need any styling. Height, width, cenetering.

Would you be able to tell me if that iPhone issue is now fixed. or will it be with this new update?

I’m sure I can figure out rounding the corners again on my own

dcapslock · March 4, 2026, 8:29pm

If you mean popups being full screen when on a small device, you can counter this using classic for initial_style.

I have included the important changes in this issue posted in the repo, which has information on vertical centering.

Sofa_Surfer · March 6, 2026, 4:50pm

Hello, I’m here again to ask for support, I use browser mod for my popups more or less with the same style. Yesterday, after last updates (core and browser-mod) my popups got smaller (biggest problem!) and with an header, this is an example with my camera:

It seems my code needs a restyle after the update:

  tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      initial_style: wide
      data:
        hide_header: true
        card_mod:
          style: |
            ha-wa-dialog {
              --mdc-dialog-min-width: auto !important;
              --mdc-dialog-max-width: 70vw !important;
              --mdc-dialog-min-height: auto !important;
              --mdc-dialog-max-height: 90vh !important;
              padding: 0 !important;
              margin: 0 !important;
            }
            .content {
              width: 100% !important;
              height: 100% !important;
              padding: 0 !important;
              margin: 0 !important;
            }
            ha-card {
              box-shadow: none !important;
              border: none !important;
              height: 100% !important;
            }
            @media (max-width: 768px) {
              ha-dialog {
                --mdc-dialog-min-width: 95vw !important;
                --mdc-dialog-min-height: auto !important;
              }
            }
        content:
          type: "custom:webrtc-camera"
          entity: camera.vialetto

Could you please guide me in the right direction, possibly in my code there was already something not correct, but, you know, “don’t touch something until it’s working”
I’ve seen in the issue list on github that you use uix (i ignored this until now), do I have to use it to size my popups now?
Thank you in advance, whatever help is appreciated!

dcapslock · March 6, 2026, 6:13pm

The header issue is fixed eith Version 2.8.2.

ha-wa-dialog no longer exists, change to ha-dialog. However, the mdc vars would have never worked with the wa dialog. To style width use —popup-width.

Card_mod should work but I test and use Uix now.

dcapslock · March 7, 2026, 7:30am

Adaptive popup dialogs in pre-release 2.9.0-beta.2

Now 2.8.x is settling in the next release of Browser Mod will build on the popup dialog changes to allow adaptive popups. Adaptive dialog is the same as what more-info now uses, changing to bottom sheet on small devices.

Browser Mod Fronent settings popups will now use adaptive popups as well.

Dev POPUPS.MD excerpt

Adaptive dialog

Adaptive dialogs use the Home Assistant bottom sheet element when on small screens. To use adaptive dialog for popups set adaptive: true.

NOTE: classic style is not compatible with adaptive dialog as it will never be used.

service: browser_mod.popup
data:
  title: The title
  content: The content
  adaptive: true
  adaptive_allow_mode_change: false
  adaptive_force_bottom_sheet: true


`adaptive`	Set to `true` to use adaptive dialog.
`adaptive_allow_mode_change`	Set to `true` to make the popup responsive to screen size changes while open but may cause issues with content or styles. Otherwise the adaptive mode is set only on open (recommended).
`adaptive_force_bottom_sheet`	If `true` force the adaptive dialog to be in bottom sheet mode when created. If `adaptive_allow_mode_change` is `true` then the adaptive mode will continue to adapt on screen size change, though this is not a recommended combination. When forcing bottom sheet, the width will be 100%. To limit width set the CSS variable `--popup-max-width` in your style for the popup.

Mar-07-2026 18-33-03

Protoncek · March 7, 2026, 7:54am

Great info, thanks. Is there any “height” modifier also?

dcapslock · March 7, 2026, 8:23am

Yes. See the list at the end of the styles.md document.

firstcolle · March 7, 2026, 8:27am

Hi everyone,

After the recent updates, I’m struggling with a card_mod customization that used to work perfectly but is now partially broken.

The background blur (backdrop filter) still works fine, but the border styling for the popup surface is no longer applied. I suspect the CSS selectors for the dialog container/surface have changed in the latest frontend version.

Here is the code I’m currently using:

  style:
    ha-dialog$: |
      :host {
        --ha-dialog-scrim-backdrop-filter: blur(5px);
      }
      /* This second part is no longer working */
      div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          border-style: solid !important;
          border-color: white !important;
          border-width: 2px !important;
      }`

Does anyone know the correct updated selector or the new CSS variables to target the popup borders in Browser Mod 2.8.2 / HA 2026.3? Any help on how to migrate this would be greatly appreciated!

dcapslock · March 7, 2026, 8:44am

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.

github.com/thomasloven/hass-browser_mod

[Important]: Home Assistant 2026.3.0 requires Browser Mod 2.8.0 and vice versa - breaking styling changes

opened 11:43PM - 17 Feb 26 UTC

closed 11:43PM - 17 Feb 26 UTC

dcapslock

Browser Mod 2.8.0 now uses the new ha-dialog updated in Home Assistant 2026.3.0.… Dialogs now use webawesome rather than material design. This change means custom popup styling which worked before 2.8.0 may no longer work. Below are known styling updates required after updating to Browser Mod 2.8.0. ## Fullscreen on mobile, classic versus other `ha-dialog` sets mobile size styles when the dialog has a property type of `standard`. This interferes with `classic` style. Browser Mod works around this by setting `ha-dialog` type to empty `""` when style is `classic`. ## Dialog surface background Set using `--ha-dialog-surface-background`. If you then want actual card background color to be different than dialog surface, also set `--ha-card-background` or `--card-background-color`. These can be set via general styling included with Browser Mod. ```yaml type: custom:popup-card title: Red popup card: type: markdown content: I have a red background and white text. popup_card_id: red-popup popup_styles: - style: all styles: |- ha-dialog { --ha-dialog-surface-background: red; --ha-card-background: red; --primary-text-color: white; color: white; } ``` ## Backdrop color and filter Backdrop filter set using ` --ha-dialog-scrim-backdrop-filter`. Color set using `--mdc-dialog-scrim-color`, a legacy naming. ```yaml type: custom:popup-card title: Custom popup - Backdrop Color & Filter dismissable: true card: type: markdown content: I am a popup has a backdrop color of red and filter of blur (5px) popup_card_id: popup-backdrop-filter popup_styles: - style: all styles: |- ha-dialog { --ha-dialog-scrim-backdrop-filter: brightness(68%) blur(5px); --mdc-dialog-scrim-color: rgba(255,0,0,0.3); } ``` ## Vertical alignment Popup vertical centering no longer is based on flex, since the popup is ulyimately the Browser's inbuilt `dialog` show in Browser's [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer). ### Vertical centering Vertical centering is now set by altering `--dialog-surface-margin-top`. The default is 40px. Setting this to auto, `--dialog-surface-margin-top: auto`, in standard Browser Mod [styles](https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md) will center the popup vertically. ```yaml ... popup_styles: - style: centered include_styles: - classic styles: | ha-dialog { --dialog-surface-margin-top: auto !important; } ``` See the [Example - centered](https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md#vertically-centered-style-centered) example in styles document for more details. ### Move to bottom To move to bottom you need to set top: unset, bottom: 0 of the actual `dialog` element so this needs uix. e.g. ```yaml uix: style: ha-dialog $ wa-dialog $: | dialog { margin-top: 0 !important; top: unset !important; bottom: 0 !important; margin-bottom: 20px !important; } ``` ## Slide-in or other animations As with mdc dialogs, ha-dialog animations need uix to target the `dialog` element of `wa-dialog`. Animations can be slightly problematic for wa-dialog as it has its own animation for show/hide (and pulse if dimiss is blocked). Setting animation times to 0 mostly solves this but you may see the popup briefly before animation, which was similar with mdc dialogs. The following is generally working well. ```yaml uix: style: .: | ha-dialog { --dialog-surface-margin-top: auto !important; /* vertically centered */ --ha-dialog-show-duration: 0; --ha-dialog-hide-duration: 0; } ha-dialog $ wa-dialog $: | @keyframes slide-in { from { transform:translateX(100%) } to { transform: translateX(0); } } dialog { animation: slide-in 0.3s forwards; } ```

Protoncek · March 7, 2026, 9:48am

Darryn, how to implement that in theme? I’ve had original HA’s popups (more-info) set to full width, but it also doesn’t work anymore. I’m trying for a couple of hours now, without success. I’ve had this in my theme

  card-mod-more-info-yaml: |
    ha-dialog $: |
      :host {
        --ha-dialog-scrim-backdrop-filter: blur(5px);
      }
    $: |
      .mdc-dialog {
        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        background: rgba(0,0,0,0.1);
      }      
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          border-radius: 2em;
          box-shadow: 0em 0em 2em white;
          min-width: 95% !important;
          position: absolute;          
        }
    .: |

I’m not sure if all is ok, but it did background blur and 95% width of more-info popup. Now it only does blur. (ha-dialog part works)… i’ve searched a lot, but obviously on wrong place…

dcapslock · March 7, 2026, 10:34am

First check through the pinned issue in the Browser Mod repo. mdc is no longer and replaced by webawesome. Also Uix guide on dialog changes.

If this is for standard more-info this will no longer work with card_mod plugin, only Uix integration. Card_mod has now fallen behind with 2023.6 release - it only looks for ha-dialog and not ha-adaptive dialog which more-info now uses.

Also, ha-adaptive-dialog is now the first elemenet, with either ha-dialog or ha-bottom-sheet as the next element in shadow root. I expect blur is working as ha-dialog-scrim-backdrop-filter is set in your theme. As it stands none of the styling will be working for more-info.

So to guide you here, and I will probably take as basis for a Uix guide, below is a simple theme file, noting that there is no shadow root needed, so using uix-more-info rather than uix-more-info-yaml.

UIX Test:
  uix-theme: UIX Test

  uix-more-info: |
    /* Works for both ha-dialog and ha-bottom-sheet */
    /* For ha-dialog specific themeing see https://github.com/home-assistant/frontend/blob/44d727763c16060de776d4acf01d7152213330af/src/components/ha-dialog.ts#L53 */
    /* For ha-bottom-sheet specific themeing see https://github.com/home-assistant/frontend/blob/44d727763c16060de776d4acf01d7152213330af/src/components/ha-bottom-sheet.ts#L34 */
    :host {
      --ha-dialog-scrim-backdrop-filter: blur(5px);
      --ha-dialog-surface-background: rgba(0,0,0,0.1);
      --ha-dialog-surface-backdrop-filter: blur(4px);
      --dialog-box-shadow: 0em 0em 2em white;
      --ha-dialog-border-radius: 2em;
      /* more-info uses attributes for size but these cannot be set by Uix so just override medium size */
      --ha-dialog-width-md: 95vw;
    }

Further note that as far as what ha-adaptive-dialog styles, it only sets border radius and padding of of bottom sheet, so these would be only vars that you may need to have !important on.

Screenshots

Dialog

Bottom Sheet

Protoncek · March 7, 2026, 11:44am

Great, many, many thanks! While i can figure out many things, i’m quite a noob in css and these things. But once someone gives me a working example i understand it and i can alter a thing or two. It’s just …devil is in the details, like indentions, dots, pipes…

dcapslock · March 8, 2026, 12:33am

You are doing very well. The primary advice I give is to first look for CSS vars as they are easy to apply on :host in most cases, except where an element defines these in shadow root for a further element to consume. The trickest are backdrop filters and animations as sometimes the backdrop root is hard to work out, though it is usually easier with webawesome components that material design components, though animations are the toughest as the keyframes need to be in the light DOM of the element they will be used for.

Mar1us · March 8, 2026, 10:58am

this looks neat can you share a complete example code for open the popup and the popup itself?

dcapslock · March 8, 2026, 11:04am

See dev documentation.

POPUPS.MD - config for custom popup card.

SERVICES.MD - config for browser_mod.popup

slimak · March 10, 2026, 12:51am

I updated the core to version 2026.3.1 and browser_mod to version 2.9.0. Everything seems fine (thank you!); I didn’t change anything and my custom background color for popup windows still works.

I have a question about popups used in the HA media browser (when you click on a photo or video, a popup window opens with the image/video; the name is 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.