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

[Soukyuu]

My Home Assistant version: 2023.9.2

What I am doing:
I have a card configured as follows:

type: custom:popup-card
dismissable: true
entity: climate.schlafzimmer_ai_thermostat
size: normal
card:
  type: custom:better-thermostat-ui-card
  entity: climate.schlafzimmer_ai_thermostat
  eco_temperature: 18
  disable_off: false
  disable_window: true
style: |
  --popup-max-width: 200px;
  --popup-min-width: 200px;

What I expected to happen:
When clicking on the entity, the size should be exactly 200px on all resolutions

What happened instead:
On desktop (2K resolution), the popup looks as expected (minus the weird white lines):

On mobile (or a small width window), the popup is always fullscreen:

Minimal steps to reproduce:
This happens with all popup cards I have since I moved from the deprecated popup-card component to browser_mod, even if the popup size would definitely fit on screen. Try exaggerating with:

type: custom:popup-card
dismissable: true
entity: climate.schlafzimmer_ai_thermostat
size: normal
card:
  type: custom:better-thermostat-ui-card
  entity: climate.schlafzimmer_ai_thermostat
  eco_temperature: 18
  disable_off: false
  disable_window: true
style: |
  --popup-max-width: 100px;
  --popup-min-width: 100px;

Error messages from the browser console:

BROWSER_MOD 2.3.0 IS INSTALLED    BrowserID: a73da351-92d5f39c
card-mod.js?hacstag=190927524322:5 CARD-MOD 3.2.2 IS INSTALLED
card-mod.js?hacstag=190927524322:5 You may not be getting optimal performance out of card-mod.
See https://github.com/thomasloven/lovelace-card-mod#performance-improvements
card.js:295 
  RGB Light Card  v1.11.0  
auto-entities.js?hacstag=1677445841121:172 AUTO-ENTITIES 1.12.1 IS INSTALLED
decluttering-card.js?hacstag=188686483100:186  DECLUTTERING-CARD    Version 1.0.0   
paper-buttons-row.js?hacstag=244872232213:1370  PAPER-BUTTONS-ROW  2.1.3 
mini-graph-card-bundle.js?hacstag=1512800620110:1  MINI-GRAPH-CARD  0.11.0 
stack-in-card.js?hacstag=248954055020:200  STACK-IN-CARD    Version 0.2.0   
get-strategy.ts:88 TypeError: Cannot read properties of null (reading 'location_name')
    at l.generateDashboard (original-states-strategy.ts:71:31)
    at a (get-strategy.ts:84:27)
    at async o.value (ha-panel-lovelace.ts:275:7)
    at async ge (browser_mod.js:66:1982)
a @ get-strategy.ts:88
swipe-card.js?hacstag=192732887500:19    SWIPE-CARD   Version 5.0.0 
hass-hue-icons.js?hacstag=3844345221251:2066  HASS-HUE-ICONS  Version 1.2.51 
mushroom.js?hacstag=444350375310:3082 🍄 Mushroom 🍄 - 3.1.0
hourly-weather.js?hacstag=499270202510:304   HOURLY-WEATHER-CARD   Version 5.1.0    
platinum-weather-card-df6d26e2.js:73   PLATINUM-WEATHER-CARD    Version 1.0.5          
better-thermostat-ui-card.js?hacstag=439367892200:549   BetterThermostatUI-CARD   version: 2.0.0    

---

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

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

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

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

• 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.

[Soukyuu]

Erf... just saw PR #619, this will most likely fix what I am experiencing.

[stale]

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.

[Soukyuu]

pr is not merged. unstale.

[tacogy3]

I am also still experiencing this issue. On iOS the popup is always opening up fullscreen no matter what I do.

[Nerwyn]

While not an official fix, in order to get non full screen popups on my misbehaving mobile devices I've been using card-mod with popup size set to fullscreen. I've tweaked it a lot and I'm pretty happy with the results:

size: fullscreen
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;
  }
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;
    }

The same styles can/should also be set in the popup style field for more responsiveness on devices that are not experiencing this bug. From what I can tell it may be an issue with older Android devices, as it does not happen on my phone but does on my Android tablet dashboard displays.

[tacogy3]

Frustrated this still isnt fixed yet