Strange looking custom widget

Hey there,

I adjusted a custom-widget to show different Informations of a room.

On my iPhone it looks like this - the top right one :

But on the Desktop it looks like this:

This is the widget code:

uid: Cell_Card_1a_small
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - label: Header
      name: text_header
      required: false
      type: TEXT
    - description: Page which will be opened as popup
      label: Page ID
      name: page
      required: false
    - context: item
      description: select group for status lights
      label: Item
      name: status
      required: false
      type: TEXT
    - context: item
      description: select item for temperature
      label: Item
      name: temp
      required: false
      type: TEXT
    - context: item
      description: Anz Fenster
      label: Item
      name: windows_numbers
      required: false
      type: TEXT
    - context: item
      description: select item for set temperature
      label: Item
      name: settemp
      required: false
      type: TEXT
    - context: item
      description: select item for humidity
      label: Item
      name: humidity
      required: false
      type: TEXT
    - context: item
      description: select item for blinds group (SUM)
      label: Item
      name: blinds_closed
      required: false
      type: TEXT
    - context: item
      description: select item for windows(s)
      label: Item
      name: windows
      required: false
      type: TEXT
    - context: item
      description: select item for numbers of windows
      label: Item
      name: windows_numbers
      required: false
      type: TEXT
timestamp: Apr 20, 2022, 9:23:14 AM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    class:
      - padding: 0px
    height: 100px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
slots:
  content:
    - component: f7-block
      config:
        style:
          left: 20px
          position: absolute
          top: -30%
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 17
              style:
                margin-right: -10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 15px
                margin-left: 30px
                margin-top: -20px
              text: "=props.title ? props.title : ''"
    - component: f7-block
      config:
        style:
          bottom: -230%
          left: 16px
          position: absolute
      slots:
        default:
          - component: f7-chip
            config:
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(Number(items[props.status].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
              iconSize: 15
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
                bottom: 16px
                font-size: 10px
                left: 35%
              text: =items[props.status].state + '/' + Math.trunc(items[props.status_anz].state,0)
              visible: =items[props.status_anz].state <> 0
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
                font-size: 10px
              text: "=items[props.door_state].state === 'ON' ? '' : ''"
              visible: "=props.door_state ? true : false"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: "=items[props.door_state].state === 'ON' ? 'door-open' : 'door-closed'"
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
                      height: 18px
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
                bottom: 15%
                font-size: 10px
                left: -34%
                top: 5px
              text: =items[props.windows].state + '/' + Math.trunc(items[props.windows_numbers].state,0)
              visible: =items[props.windows_numbers].state > 0
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: window-open
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
                      height: 18px
          - component: f7-chip
            config:
              font-size: 10px
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
                font-size: 10px
                left: 35%
                top: -23px
              text: =Math.trunc(items[props.blinds].state,0) + '/' + Math.trunc(items[props.windows_numbers].state,0)
              visible: =items[props.windows_numbers].state > 0
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: "=(Number(items[props.blinds].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'"
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'"
                      height: 18px
    - component: f7-block
      config:
        style:
          bottom: -125%
          left: 16px
          position: absolute
      slots:
        default:
          - component: f7-chip
            config:
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: thermometer
              iconSize: 15
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
                font-size: 10px
              text: "=(items[props.temp].displayState  ? items[props.temp].displayState : items[props.temp].state) +  (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
              visible: "=props.temp ? true : false"
          - component: f7-chip
            config:
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: drop
              iconSize: 15
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
                bottom: 10px
                font-size: 10px
              text: =items[props.humidity].state
              visible: "=props.humidity ? true : false"
    - component: oh-link
      config:
        action: popup
        actionModal: ='page:' + props.page
        style:
          height: 110px
          left: 0px
          position: absolute
          top: 0px
          width: 100%


Do you guys have a hint for me, why it looks so different on iPhone and Desktop?