Popup window overflows in Android companion app

[slovdahl]

My Home Assistant version: 2023.1.5 HA Android companion version: 2023.1.1-full

I'm not sure where exactly the bug is, but I need to start somewhere. Please point me in the right direction if I'm in the wrong place.

What I am doing:

Opening a browser_mod popup (in tap_action for a button card) using action: fire-dom-event and service: browser_mod.popup.

What I expected to happen:

The popup is opened and does NOT overflow.

What happened instead:

• In the HA Android companion app (version 2023.1.1-full): the popup overflows
• In Chrome 109.0.5414.118 on Android 13: the popup overflows
• In Firefox 109.1.1 on Android 13: the popup does NOT overflow
• On latest Firefox and Chrome on macOS: the popup does NOT overflow (not even in developer tools and the Responsive Design Tool emulating a mobile)
• In the HA iOS companion app on an iPhone 11 with iOS 16.3: the popup does NOT overflow

I have been running the same HA server, HA companion app and all HACS plugin versions for about a week when this suddenly started happening ~1 week ago. I'm fairly confident that a Chrome or Android System WebView update broke it as both the HA companion app and Chrome are broken in the same way.

I managed to attach my desktop Chrome's dev tools to my Android phone's Chrome and was able to tweak the width of the popup and get it fully visible, but I'm way out of my comfort zone when it comes to CSS (and JS) these days so I wasn't able to understand why it happened. But I'm happy test specific things out via the Chrome dev tools if needed.

Minimal steps to reproduce:

Minimal dashboard that reproduces the problem by tapping on the card (just replace the three light entities with lights or switches):

title: Overflow bug
views:
  - theme: Backend-selected
    title: Home
    type: panel
    badges: []
    cards:
      - type: button
        entity: light.light_group
        name: Lights
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lights
              content:
                type: entities
                entities:
                  - entity: light.light_1
                    name: Light 1
                  - entity: light.light_2
                    name: Light 2

HA companion app on Android

Firefox on Android

Error messages from the browser console:

Nothing interesting in the console on any of the desktop browsers, but the Firefox one attached:

BROWSER_MOD 2.2.0 IS INSTALLED
    BrowserID: afac19fb-afc6cdfd [browser_mod.js:407:6092](https://hostname/browser_mod.js)
CARD-MOD 3.2.0 IS INSTALLED [card-mod.js:5:247](https://hostname/hacsfiles/lovelace-card-mod/card-mod.js)
🍄 Mushroom 🍄 - 2.5.2 [mushroom.js:2960:104](https://hostname/hacsfiles/lovelace-mushroom/mushroom.js?hacstag=444350375252)
  BUTTON-CARD  
 Version 3.4.2 [button-card.js:425:4478](https://hostname/hacsfiles/button-card/button-card.js)
  TIME-PICKER-CARD  
  Version 1.4.0    [time-picker-card.js:150:2349](https://hostname/hacsfiles/lovelace-time-picker-card/time-picker-card.js?hacstag=261262884140)
vertical-stack-in-card
Version: 0.4.4 [vertical-stack-in-card.js:1:9](https://hostname/hacsfiles/vertical-stack-in-card/vertical-stack-in-card.js?hacstag=142051833044)
SLIDER-ENTITY-ROW 17.3.0 IS INSTALLED <empty string> [slider-entity-row.js:82:184](https://hostname/hacsfiles/lovelace-slider-entity-row/slider-entity-row.js?hacstag=1448997001730)
TEMPLATE-ENTITY-ROW 1.3.0 IS INSTALLED <empty string> [template-entity-row.js:51:267](https://hostname/hacsfiles/lovelace-template-entity-row/template-entity-row.js?hacstag=231674882130)
 MINI-GRAPH-CARD  0.11.0 [mini-graph-card-bundle.js:1:95970](https://hostname/hacsfiles/mini-graph-card/mini-graph-card-bundle.js?hacstag=1512800620110)
 VACUUM-CARD  2.6.2 [vacuum-card.js:4:17736](https://hostname/hacsfiles/vacuum-card/vacuum-card.js?hacstag=261291295263)
  SCHEDULER-CARD  
  Version: v2.3.6 [scheduler-card.js:1885:1375](https://hostname/hacsfiles/scheduler-card/scheduler-card.js?hacstag=286270157326)
  BAR-CARD 
  Version 3.1.7    [bar-card.js:4855:9](https://hostname/hacsfiles/bar-card/bar-card.js?hacstag=163363577320)
AUTO-ENTITIES 1.12.1 IS INSTALLED [auto-entities.js:172:7850](https://hostname/hacsfiles/lovelace-auto-entities/auto-entities.js?hacstag=1677445841121)

---

By replacing the space in the checkboxes ([ ]) with an X below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or 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.

[finalbillybong]

This is also happening in the iOS companion app but is fine in Safari.

[slovdahl]

@finalbillybong Interesting, I did try it in my wife's iOS companion app too without being able to reproduce. Do you have an example of it?

[finalbillybong]

I sure do.

[finalbillybong]

And I Safari it’s fine.

[KoljaWindeler]

Same issue on a simple chrome window on Android here ..

[markwoodward86]

I would like to jump on the reporting bandwagon. Fullscreen pop up works fone but does not work in my use case. Wide, normal, and none have the same overflow effect which cuts off vital info.

I do not that i have my text size accessibility settings (android, pixel 6 pro) set to the smallest font size, if i put back to normal the pop up seems fine. Unfortunately i cant have the normal font size.

[abigdeel]

Noticing this on my Pixel 7 Pro as well, and only on the companion app.

Not an issue in a web browser on my Pixel 7 Pro or in Home Assistant Desktop (Windows 11). Oddly enough, also not an issue on a Pixel 1, but it seems to be running an older version of the app.

[slovdahl]

Much guesswork here now.. Looks like the OnePlus 8 Pro viewport is wider than 450 px but narrower than 560 px, and for some reason the --popup-min-width from these defaults is not applied. Instead --mdc-dialog-min-width falls back to a default of 560 px => overflow.

Anyway, by adding 👇 to my popups I managed to work around it.

style: |
  --popup-min-width: 400px;

And in the full example in the original post:

title: Overflow bug
views:
  - theme: Backend-selected
    title: Home
    type: panel
    badges: []
    cards:
      - type: button
        entity: light.light_group
        name: Lights
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lights
              style: |
                --popup-min-width: 400px;
              content:
                type: entities
                entities:
                  - entity: light.light_1
                    name: Light 1
                  - entity: light.light_2
                    name: Light 2

[markwoodward86]

You saint. Thank you!

[slovdahl]

Opening 👇 in Chrome and Firefox on my OnePlus 8 Pro yields some interesting results 🤔

<!DOCTYPE html>
<html>
    <body><h1><script type="application/javascript">document.write(window.innerWidth);</script></h1></body>
</html>

Firefox:

Chrome:

[alexandoe]

Same issue for me in companion app on Pixel 6 Pro.

[stale[bot]]

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.

[slovdahl]

Still an issue.

[silvioped]

Same probleme here, iOS 16 (wife) and iOS 17 (me), companion app, safari and chrome have the issue.

[stale[bot]]

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.

[slovdahl]

Still an issue.

[scarecrowddb]

This is still and issue

[isewise]

Still an issue.