Problème affichage sur mobile des popup browsermod!

Entraide Home Assistant
1

Hey! j’ai un problème depuis plusieurs mois, j’ai cherché un peu partout mais je ne vois pas du tout de solutions…
Sur desktop (chrome), j’ai mes popups qui s’affichent très bien:

image
image1920×1178 40.3 KB

Mais sur mobile (android companion), c’est limite en plein écran! :confused:

image
image274×569 12.7 KB

C’est un tout petit peu en train de me faire péter un plomb ^^
Evidemment, le code est identique, car le dashboard est commun à tous mes appareils. Et le « problème » ne dépend pas du thème que j’utilise. C’est idem avec le theme de base par exemple.
Idem chez vous? Une idée?

code du popup 
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: markdown
        card_mod:
          style: |
            ha-markdown {
              padding: 0px 0px 0px 0px !important;
            }
        content: |-
          {% if is_state('switch.plug_nous_garage_avr','off') %}
            <ha-alert alert-type="info">Allumer **l'amplificateur**?</ha-alert>
          {% else %}
            <ha-alert alert-type="info">Eteindre **l'amplificateur**?</ha-alert>
          {% endif %}
      left_button: "oui"
      left_button_action:
        service: switch.toggle
        data:
          entity_id: switch.plug_nous_garage_avr
      right_button: "annuler"
2

Bonjour,
c’est un bug de browser-mod qui a toujours pas été fixer. Ta une solution proposer dans l’issue.

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      size: normal
      card_mod:
        style: |
          ha-dialog {
            --mdc-dialog-min-width: 90vw !important;
            --mdc-dialog-min-height: fit-content !important;
            --mdc-dialog-max-width: var(--mdc-dialog-min-width) !important;
            --mdc-dialog-max-height:  var(--mdc-dialog-min-height) !important;
            --ha-dialog-border-radius: var(--ha-card-border-radius) !important;
            --vertical-align-dialog: center !important;
            --header-height: 5vh !important;
            --footer-height: var(--header-height) !important;
            --padding-y: 8px !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
          }
          .content {
            height: fit-content !important;
            max-height: 90vh !important
            pointer-events: unset !important;
            padding: 0 !important;
          }
          .container {
            padding: 0 !important;
          } 
      content:
        type: markdown
        card_mod:
          style: |
            ha-markdown {
              padding: 0px 0px 0px 0px !important;
            }
        content: |-
          {% if is_state('switch.plug_nous_garage_avr','off') %}
            <ha-alert alert-type="info">Allumer **l'amplificateur**?</ha-alert>
          {% else %}
            <ha-alert alert-type="info">Eteindre **l'amplificateur**?</ha-alert>
          {% endif %}
      left_button: oui
      left_button_action:
        service: switch.toggle
        data:
          entity_id: switch.plug_nous_garage_avr
      right_button: annuler

Sur PC

image
image1862×366 56.9 KB

Sur mobile

Screenshot_2024-05-25-04-10-41-607_io.homeassistant.companion.android
Screenshot_2024-05-25-04-10-41-607_io.homeassistant.companion.android1080×2400 311 KB

1 « J'aime »
3

Tu es formidable.
J’avais pourtant cherché… Mais pas bien visiblement.

1 « J'aime »
4

Avec quelques modifs côté padding&co j’ai réussi à trouver les réglages parfaits pour ma config: Merci encore!!

image
image287×604 61.5 KB

card_mod:
  style: |
    ha-dialog {
      --mdc-dialog-min-height: fit-content !important;
      --mdc-dialog-max-height: 180vw !important;
      --mdc-dialog-min-width: 340px !important;
      --mdc-dialog-max-width: 90vw !important;;
      --ha-dialog-border-radius: var(--ha-card-border-radius) !important;
      --vertical-align-dialog: center !important;
    }
    .content {
      height: fit-content !important;
      max-height: 90vh !important
      pointer-events: unset !important;
    }
    .container {
      padding: 4px 8px !important;
    }
    div.buttons {
      padding: 8px !important;
    }
1 « J'aime »