Popups not completely rendered on all devices

[Stinocon]

Hello! I'm trying to spruce up my dashboard and have stumbled upon these 2 HACS components:

• browser-mod
• light-popup-card

To be brief: I use "fire-dom-event" to generate a custom popup (with light-popup-card) on prolonged pressure of a light entity. It works very well on my smartphone (Android-Xiaomi) with the official HomeAssistant app while it doesn't work on Firefox (or Edge) on two of my Windows PCs or on my girlfriend's smartphone, again with the official HomeAssistant app (Android-Xiaomi).

Here's what the popup looks like: https://imgur.com/a/BB1Genr

Anyone have any ideas?

The code for the card is as follows:

- entity: light.flos
    name: Flos
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info
    hold_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: Flos
        card:
          type: 'custom:light-popup-card'
          entity: light.flos
          icon: 'mdi:lightbulb'
          settings:
            openButton: Altri Colori
            closeButton: Chiudi
          settingsCard:
            type: 'custom:light-entity-card'
            cardOptions:
              entity: light.flos
              hide_header: true
              brightness: false
              smooth_color_wheel: true
          actionsInARow: 2
          brightnessWidth: 150px
          brightnessHeight: 400px
          switchWidth: 150px
          switchHeight: 400px
          borderRadius: 12px
          actions:
            - service: scene.turn_on
              color: '#ffaa00'
              service_data:
                entity_id: scene.flos_relax
            - service: scene.turn_on
              color: '#0191fc'
              service_data:
                entity_id: scene.flos_blu
            - service: scene.turn_on
              color: '#f0e479'
              service_data:
                entity_id: scene.flos_libro

Thanks!

[DBuit]

Hello @Stinocon

i am missing the style part in your configuration. When you check the info on the github page for the card there is some information and where i add this style:

style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width:100%;
          box-shadow:none;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);
          --secondary-background-color: rgba(0,0,0,0);
          --ha-card-background: rgba(0,0,0,0);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;
        }
        mwc-icon-button {
          color: #FFF;
        }

I guess if you add this the popup should look good on pc.

[Stinocon]

Oh sorry, I really didn't realize the style part was mandatory :( Since I'm not exactly an ace with this (I already have card-mod) could you point me to where to put it? Because the whole thing will be part of a glance card with many more entity lights, I guess I'll have to repeat the style code for each light?

This is an example of a glance card with a single entity:

type: glance
entities:
  - entity: light.flos
    name: Flos
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info
    hold_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: Flos
        card:
          type: 'custom:light-popup-card'
          entity: light.flos
          icon: 'mdi:lightbulb'
          settings: true
          settingsCard:
            type: 'custom:light-entity-card'
            cardOptions:
              entity: light.flos
              hide_header: true
              brightness: false
              smooth_color_wheel: true
          actionsInARow: 2
          brightnessWidth: 150px
          brightnessHeight: 400px
          switchWidth: 150px
          switchHeight: 400px
          borderRadius: 12px
          actions:
            - service: scene.turn_on
              color: '#FDCA64'
              service_data:
                entity_id: scene.scrivania_relax
            - service: scene.turn_on
              color: '#FDCA64'
              service_data:
                entity_id: scene.test
            - service: scene.turn_on
              color: '#FDCA64'
              service_data:
                entity_id: scene.test

Many many thanks!

EDIT:

In the meantime, I've tried multiple ways to enter the styling code but either I'm not entering it in the right place or I'm entering it incorrectly. When it doesn't give any syntax error however the popup remains cut off or even worse doesn't show up.

I don't understand what I'm doing wrong :(

[Ned-Tom]

@Stinocon , have you installed the lovelace-card-mod to ?

That mod enables some styling of the light-popup-card, you can then also use the Optional styling attribute what @DBuit mentioned.

Hope that helps, greetings Tom.