Height and Width Sizing Bug

[ve1koz111]

My Home Assistant version: 2023.7.3

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Setting a maximum width and height for popups with browser mod. In 2023.7.2, there was a bug where mushroom template cards were not clickable on popups, so I updated home assistant, mushroom cards and refreshed cache, and it worked. However, now the CSS styling is not working (it was not changed). Even in the latest update of card mod. Mainly a problem on mobile (companion app)

What I expected to happen: A maximum width and height to be applied according to CSS

What happened instead: No maximum width and height are being applied. Also, the popup appears in random areas of the screen when sizing is applied.

Minimal steps to reproduce:

type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb-group
secondary: null
entity: light.top_lounge_lights
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog__scrim {
              backdrop-filter: blur(4px) !important;
              -webkit-backdrop-filter: blur(10px) !important;
              background-color: rgba(0, 0, 0, 0.1) !important;
            }             
            ha-dialog {
              --mdc-dialog-min-width: 400px !important;
              --mdc-dialog-max-width: 500px !important;
              --mdc-dialog-max-height: 800px !important;
              --mdc-dialog-min-height: 0px !important;
            }
            .content {
              width: auto !important;
            }    
      content:
        type: vertical-stack
        cards:
          - type: custom:mushroom-title-card
            title: Lounge Lights
          - type: custom:mushroom-light-card
            entity: light.downlights_4
            show_brightness_control: true
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }            
          - type: custom:mushroom-light-card
            entity: light.lounge_terrace
            name: Terrace
            show_brightness_control: true
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-width: 0;
                }              
hold_action:
  action: toggle
double_tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state(config.entity, 'on') %}
          {% if state_attr(config.entity, 'rgb_color') == none %}
            --icon-color: rgb(255,190,137) !important;
            --shape-color: rgb(255,190,137, 0.2 ) !important;
          {% else %}
            {% set r = state_attr(config.entity, 'rgb_color')[0] %}
            {% set g = state_attr(config.entity, 'rgb_color')[1] %}
            {% set b = state_attr(config.entity, 'rgb_color')[2] %}
            --icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
            --shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
          {% endif %}
        {% endif %}
      }
    .: |
      ha-card {
        width: 66px;
        margin-left: 73%;
        top: -178px;
        background: none;
      }
      :host {
        --mush-icon-size: 38px;
      }

Error messages from the browser console:

---

By putting an X in the boxes ([]) 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.

[myhades]

Same here, and the popups' expanding way too long vertically even when no sizings applied. Can reproduce on both latest iOS & Android Companion/Chrome, or anything with similar aspect ratio. It's perfectly fine on Chrome PC.

[ildar170975]

Minimal steps to reproduce:

81 lines of code. Using FOUR custom plugins browser_mod, mushroom-template-card, mushroom-title-card, mushroom-light-card...