Panel is too wide in Android app

[pszafer]

Hi, first of all thanks for this panel card!

I have problem with width of elements in Android app. I cannot figure out why it's too wide. It has horizontal scrollbar for some reason and it's like on the screenshot below

my config

type: 'custom:homekit-card'
title: Parter
home: true
useTemperature: true
enableColumns: true
style: |
  :host {
        --tile-background: rgba(255, 255, 255, 0.6);
        --tile-border-radius: 12px;
        --tile-width: 100px;
        --tile-height: 79px;
        --tile-on-background: rgba(255, 255, 255, 1);
        --min-header-height: 0px;
   }
   .header ul li {
     font-size: 12px;
   }
   .groupClass {
     background-color: rgba(217, 249, 157, 0.8)!important;
   }
rows:
  - row: 1
    columns:
      - column: 1
        tileOnRow: 4
        entities:
          - title: Info
            entities:
              - custom: lampen
                name: Kamery
                icon: 'mdi:camera'
                state: cover.brama_wjazdowa
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/lampen
                hold_action:
                  action: more-info
                  entity: group.all_lights
                double_tap_action:
                  action: navigate
                  navigation_path: /lovelace/dev
              - card: 'custom:mini-graph-card'
                cardOptions:
                  entities:
                    - entity: sensor.outdoor_temperature
                name: Temp
                show_state: true
              - card: 'custom:mini-graph-card'
                cardOptions:
                  entities:
                    - entity: air_quality.gios
                name: AQI Jeżyce
                show_state: true
              - card: weather-forecast
                cardOptions:
                  entity: weather.dark_sky
                cardStyle: |
                  ha-card {
                      padding: 5px!important;
                      display: flex!important;
                      flex-direction: column!important;
                      background-color: rgba(0,0,0,0.3);
                      box-shadow: none!important;
                      border-radius:0!important;
                  }
                  .content {
                     display: flex!important;
                      flex-direction: row!important;
                  }
                  .icon-image {
                      min-width: auto!important;
                  }
                  .icon-image > * {
                      height: 32px!important;
                      flex: 0 0 32px!important;
                  }
                  .info .name-state {
                      font-weight: 500;
                  }
                  .info .name-state .state {
                      font-size:14px!important;
                      text-align:right;
                  }
                  .info .name-state .name {
                      font-size:14px!important;
                  }
                  .info .temp-attribute {
                      width:100%;
                      font-weight: 500;
                  }
                  .info .temp-attribute .temp {
                          font-size: 16px!important;
                  }
                  .info .temp-attribute .temp span {
                          font-size: 14px!important;
                  }
                  .forecast {
                      font-size: 10px!important;
                      padding-top: 5px!important;
                  }
                  .forecast-image-icon {
                      padding:0!important;
                  }
                  .forecast-image-icon > * {
                      width:20px!important;
                      height:20px!important;
                      margin: 0 auto!important;
                  }
                  .forecast .temp {
                      margin-top:0!important;
                      font-size:12px!important;
                  }
                  .forecast .templow {
                      display:none;
                  }
                wider: true
                noPadding: true
                widersize: 2
              - entity: climate.hc2
                name: Termostat
                tap_action:
                  action: more-info
                  entity: climate.hc2
  - row: 2
    columns:
      - column: 1
        tileOnRow: 4
        entities:
          - title: Sypialnia
            entities:
              - entity: light.sypialnia_swiatla
                name: Wszystkie
                conditionalClass: |
                  [[[
                    return "groupClass";
                  ]]]
              - entity: light.sypialnia_lewo
                name: Lewo
              - entity: light.sypialnia_prawo
                name: Prawo
              - entity: light.sypialnia_okno
                name: Okno
              - entity: light.yeelight_strip1_7811dca9b990
                name: LED
      - column: 2
        entities:
          - entities:
              - entity: fan.xiaomi_miio_device
                name: Oczyszczacz
              - entity: cover.roleta_sypialnia
                name: Roleta
              - card: 'custom:mini-graph-card'
                cardOptions:
                  entities:
                    - entity: sensor.temp_bedroom
                      name: Temp
                      show_state: true
              - card: 'custom:mini-graph-card'
                cardOptions:
                  entities:
                    - entity: sensor.aqi_bedroom
                      name: AQI
                      show_state: true
                  color_thresholds:
                    - value: 0
                      color: '#65f312'
                    - value: 20
                      color: '#d35400'
                    - value: 40
                      color: '#c4100a'
  - row: 3
    columns:
      - column: 1
        tileOnRow: 4
        entities:
          - title: Salon
            entities:
              - entity: light.salonparter
                name: Wszystkie
                conditionalClass: |
                  [[[
                    return "groupClass";
                  ]]]
              - entity: light.salontv1
                name: TV1
              - entity: light.salontv2
                name: TV2
              - entity: light.yeelightsalon1
                name: Led1
              - entity: light.yeelightsalon2
                name: Led2
              - entity: light.yeelight_color1_7811dc6b9410
                name: Led3
              - entity: light.yeelight_color1_7811dca1e349
                name: Led4
      - column: 2
        entities:
          - entities:
              - entity: cover.roleta_okno_salon
                name: Okno
              - entity: cover.roleta_balkon
                name: Balkon
  - row: 4
    columns:
      - column: 1
        tileOnRow: 4
        entities:
          - title: Kuchnia
            entities:
              - entity: light.kuchniaparter
                name: Wszystkie
                conditionalClass: |
                  [[[
                    return "groupClass";
                  ]]]
              - entity: light.led_lodowka
                name: Lodówka
              - entity: light.quinled_plyta
                name: Płyta
              - entity: light.wyspa
                name: Wyspa
              - entity: light.kinkiet
                name: Kinkiet
              - entity: light.szafka_plyta
                name: Szafka Płyta
              - entity: light.szafka_lodowka
                name: Szafka lodówka
  - row: 5
    columns:
      - column: 1
        tileOnRow: 4
        entities:
          - title: Łazienka
            entities:
              - entity: light.calalazienka
                name: Wszystkie
                conditionalClass: |
                  [[[
                    return "groupClass";
                  ]]]
              - entity: light.lazienka1
                name: Góra1
              - entity: light.lazienka2
                name: Góra2
              - entity: light.lazienka3
                name: Góra3
              - entity: light.lustro
                name: Lustro

it's not happens in chrome and firefox for android, only HA app.

[pszafer]

I found it: it's because of this: https://github.com/DBuit/Homekit-panel-card/blob/9ae4a070f2bb3cf51889d9a2e31307d5ac7a4f3a/src/homekit-panel-card.ts#L920-L922

.container.rows .header {
            padding: 0 25px;
}

for now I will do padding: 0 0 !important, but I can make PR for it if you think it's all users "problem".

[IamMrandrew]

I got this problem with smaller screen android devices too. I tried yours but seems not working for me? And I try to change the width of .header, .homekit-card. But seems width smaller than 360px will start showing the white space. Is there any way I can increase the width of .homekit-card but not getting that white space? It works in ios btw but not on android.

[DBuit]

At this point the minimal width needed is 360px