[MainUI] Responsive layout looks incorrect when switching to landscape mode

[egoist6]

The problem

Given a simple oh-page populated with standard oh-cells:

config:
  label: Home
  layoutType: responsive
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config:
            cols:
              "719": 2
              default: 5
          slots:
            default:
              - component: oh-cell
                config:
                  title: test 1
              - component: oh-cell
                config:
                  title: test 2
              - ...

On my iPhone in portrait mode it works and looks as expected (cells are arranged by 2 cells per row). When changing from portrait mode to landscape mode it shows 5 cells per row (as expected) but the width of the cell is wrong as can be seen here:

Expected behavior

5 cells per row should be displayed at normal width size.

Steps to reproduce

Use the above code and rotate your iPhone. Problem appears in safari browser as well as iOS app (v3.05 (11))

Your environment

runtimeInfo:
  version: 4.3.0.M2
  buildString: Milestone Build
locale: de-DE
systemInfo:
  configFolder: /etc/openhab
  userdataFolder: /var/lib/openhab
  logFolder: /var/log/openhab
  javaVersion: 17.0.12
  javaVendor: Debian
  osName: Linux
  osVersion: 6.6.51+rpt-rpi-2712
  osArchitecture: aarch64
  availableProcessors: 4
  freeMemory: 352932776
  totalMemory: 838860800
  uptime: 1208330
  startLevel: 100
addons:
  - automation-jsscripting
  - binding-androiddebugbridge
  - binding-astro
  - binding-homematic
  - binding-http
  - binding-mail
  - binding-openweathermap
  - binding-snmp
  - binding-systeminfo
  - binding-tr064
  - binding-tradfri
  - misc-openhabcloud
  - persistence-mapdb
  - transformation-map
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: false
    windows: true
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    os: windows
    pixelRatio: 2
    prefersColorScheme: light
  isSecureContext: false
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: N/A
    hardwareConcurrency: 4
    language: de-DE
    languages:
      - de-DE
      - de
      - en-US
      - en
    onLine: true
    platform: Win32
  screen:
    width: 1280
    height: 720
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: light
    homeNavbar: simple
    homeBackground: default
    expandableCardAnimation: default
    blocklyRenderer: null
  userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
    like Gecko) Chrome/130.0.0.0 Safari/537.36
timestamp: 2024-10-28T21:18:24.948Z

Browser console

CSS class .oh-cell-container shows a width of 146px. The next container already a width of 42px.

[florian-h05]

Might have already been fixed by https://github.com/openhab/openhab-webui/pull/2801, which is not available in any milestone yet. The next milestone is planned for Nov 10.

[egoist6]

ok - thanks. I will provide feedback then.

[florian-h05]

You don't need to - just tested this myself, and it is not fixed yet, but I have a fix for it: #2853.