Problème affichage sur mobile des popup browsermod!

[mrgrlscz]

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:

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

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"

[WarC0zes]

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

Popups not respecting size/style on mobile app/small width

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

Sur mobile

[mrgrlscz]

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

[mrgrlscz]

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

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;
    }

[mrgrlscz]

Hum…. ça fonctionnait très bien… puis plus depuis quelques semaines je crois…
Je viens mettre mon nez dans les maj et changelog respectifs de ha et browser_mod:
mais à part la disparition de size: x au profit de initial_style: x, je n’ai rien trouvé.
lien vers doc du popup browser_mod
j’ai essayé plusieurs configurations sans résultat.
Quelq’un a le même soucis, ou la solution ;)?

[WarC0zes]

Salut,
il y avait l’option size: classic pour mobile qui était sorti et fessait une petite fenêtre du popup, mais est cassé depuis le core 2025.10.x.

[Bug]: Home Assistant 2025.10 breaks `classic` style on mobiles

un fix avec card_mod est proposé dans l’issue et un fix pour le core 2025.11.x est en cours.

[mrgrlscz]

Okay!! merci pour le lien!
je vais attendre le mois prochain alors.
Pour info si quelqu’un d’autre passe par là, pour moi ce fix ne fonctionne pas:

card_mod:
  style:
    ha-dialog $: |
      @media (max-width: 450px), (max-height: 500px) {
        .mdc-dialog .mdc-dialog__surface {
            min-height: 10%;
        }
      }

[WarC0zes]

Je l’ai mis dans mon thème directement:

  card-mod-more-info-yaml: |
    ha-dialog $: |
      @media (max-width: 392px), (max-height: 835px) {
        .mdc-dialog .mdc-dialog__surface {
            min-height: 10% !important;
        }
      }

Avec l’option size: classic dans le popup browser mod et nikel.
max-width and max-height sont les valeurs de résolution fournies dans browser-mod.

[mrgrlscz]

You rooock!

Au niveau thème ça passe !! Merci

[WarC0zes]

C’est plus simple dans le thème, ça évite de refaire tous les popups

[WarC0zes]

@WarC0zes

Avec l’option size: classic

@mrgrlscz
l’option de size: est maintenant initial_style: classic depuis la 2.6.0 de browser-mod. size fonctionne quand même, mais j’ai peur qu’elle soit supprimée dans le futur.

[WarC0zes]

@mrgrlscz ,
problème résolu dans le core 2025.10.2

Fix ha dialog default size

Plus besoin de surcharger ton thème avec card_mod. Le mode classic fonctionne comme il faut maintenant.