Popup is stretched to the entire window in the android app home assistant

[andrey170183]

My Home Assistant version: 2023.7.2

What I am doing:
Updated browser_mod to version 2.3.0

What I expected to happen:
Open in a small window as before before the update

What happened instead:
popup opened for the whole window in the android app home assistant

Minimal steps to reproduce:
Just updated browser_mod to version 2.3.0

[WW1983]

Same on iPhone

[K-RAD]

Same here (Android 13)

[limitless00net]

same here..

[rob-oravec]

Me too - iPhone. Have tried pretty much everything (I think) - style changes, size changes as per documentation, theme changes, clear cache.

[Namsikjo]

I'm having the same problem too. (iPhone14Pro iOS17, iPhone11Pro iOS16)

[Lux315]

Got this issue aswell.

Seems to be the same
issue like here: #617

@thomasloven Could you please take a look?

[suheilpurewal]

same issue for me on Android (Pixel 7 pro) & iPhone (14 pro max). Seems to be working fine on iPad & PC/Mac.

[ASNNetworks]

same issue for me on Android (Pixel 7 pro) & iPhone (14 pro max). Seems to be working fine on iPad & PC/Mac.

True, it affects popups on mobiles only. Basically devices that show the default more-info dialogs in a window are unaffected. Devices that show the more-info dialogs in a fullscreen manner (the core dialogs) now also show browser_mod popups in fullscreen (with a bugged out header).

[roderik-maker]

A temporary and not optimal fix, is to install card_mod and add the following to your popup cards:
(For IOS, haven't yet tested on android)

card_mod:
  style: |
    ha-dialog {
      --mdc-dialog-min-height: 10px !important;
    }

This returns the popups to a small size however, they are now at the bottom of the screen. I haven't yet figured out how to move them back up, but at least you don't have to quit the app to close a popup (This should help until a proper fix is implemented).

Example of full popup card:

type: custom:popup-card
title: Custom popup
dismissable: true
card:
  type: markdown
  content: This replaces the more-info dialog
right_button: right
left_button: left
entity: input_button.battery
card_mod:
  style: |
    ha-dialog {
      --mdc-dialog-min-height: 10px !important;
    }

[jbrandek]

Ive bee able to fix it the problem is in browser_mod.js and browser_mod.js.gz on media querry 450px
you should change it to this:

@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: 97vw;
--mdc-dialog-max-width: 97vw;
--mdc-dialog-min-height: 10%;
--mdc-dialog-max-height: 100%;
}
then delete cache

i leave the files if someone does not know how to edit them, just delete the ones from custom_components/browser_mod/

and replace this 2

dont know how to edit in github if someone knows please upload them so they are kept in next update
browser_mod.zip

[Razzer90]

THX! Works on IOS!

[ve1koz111]

#617 Fix at the bottom

[smeen89]

I too have this issue. And I've tried the mentioned solutions to no avail. I'm on Android app on a OnePlus 9 Pro.

What it looked like:

What it looks like now:

[ve1koz111]

@smeen89 #617 (comment)

[smeen89]

@ve1koz111

You beautiful magician! This has been bugging me for so long and now it works! Great job!

[ASNNetworks]

@ve1koz111 thank you so much for your fix. I tried it and works just like it should :) Hopefully @thomasloven will merge with the official.

[stale]

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.

[JoaoPedro13]

this is still an issue, replacing the files did not do the trick for me

[thomasloven]

Could someone please post a screenshot of what the normal non-browser_mod more-info dialog popup looks like on the android app?

[Dino-Tech]

@thomasloven 1st one is BM