Layout rendered properly in Simulator but not on physical Device

[kutoman]

Hi,
I'm new to Zepp OS app development and I can't figure out why the result on the physical device does not look like in the simulator.
In this example you see my mini program but I experience the same issue for my shortcut card. It feels like the device has issues with the flex layout but based on the specs it should be supported.

.
on my physical device it looks like this:

my mini program:

import { createWidget, widget, align, prop, event, showToast } from '@zos/ui';
import { getDeviceInfo } from '@zos/device';
import { getText } from '@zos/i18n';
import { createPrayerTimeCell } from '../../../utils/prayerCell.js';
import { tickClock, getCountdown } from '../../../utils/countdown.js';
import { updateHighlights } from '../../../utils/highlight.js';
import { logDeviceInfo } from '../../../utils/debug.js';

const PRAYER_LABELS = ['fajr', 'sunrise', 'dhuhr', 'asr', 'maghrib', 'isha'];
const PRAYER_TIMES = [
  { h: 4, m: 15 },
  { h: 5, m: 45 },
  { h: 12, m: 30 },
  { h: 15, m: 45 },
  { h: 18, m: 50 },
  { h: 20, m: 30 },
];

let countdownLabelWidget = null;
let countdownTimerWidget = null;
let timerId = null;
let prayerCellWidgets = [];

Page({
  onInit() {},

  build() {
    logDeviceInfo('[MainPage] ');
    const { width: W, height: H, screenShape } = getDeviceInfo();
    const isBand = W < 300;

    createWidget(widget.FILL_RECT, {
      x: 0, y: 0, w: W, h: H,
      color: 0x000b1e,
    });

    const container = createWidget(widget.VIRTUAL_CONTAINER, {
      layout: {
        x: '0',
        y: '0',
        width: '100%',
        height: '100%',
        display: 'flex',
        'flex-flow': 'column',
        'justify-content': 'center',
        'align-items': 'center',
        'row-gap': '10px',
      },
    });

    // Countdown label
    countdownLabelWidget = createWidget(widget.TEXT, {
      parent: container,
      layout: { width: '80%', height: '20px' },
      text: getText('until_next'),
      color: 0x888888,
      text_size: 14,
      align_h: align.CENTER_H,
    });

    // Countdown timer
    const countdownData = getCountdown();
    countdownTimerWidget = createWidget(widget.TEXT, {
      parent: container,
      layout: { width: '80%', height: '40px' },
      text: countdownData.text,
      color: 0xffffff,
      text_size: 28,
      align_h: align.CENTER_H,
    });

    const locationWidget = createWidget(widget.TEXT, {
      parent: container,
      layout: { width: '80%', height: '30px' },
      text: 'Istanbul',
      color: 0xaaaaaa,
      text_size: 16,
      align_h: align.CENTER_H,
    });

    const gridContainer = createWidget(widget.VIRTUAL_CONTAINER, {
      parent: container,
      layout: {
        x: '0',
        y: '0',
        display: 'flex',
        'flex-flow': isBand ? 'column' : 'column',
        width: '100%',
        height: isBand ? '240px' : '160px',
        'justify-content': 'center',
        'align-items': 'center',
        'row-gap': '0px',
      },
    });

    if (isBand) {
      // Band: single column, 6 rows
      for (let i = 0; i < 6; i++) {
        const cellData = createPrayerTimeCell(gridContainer, PRAYER_LABELS[i], PRAYER_TIMES[i], i, 0.6);
        prayerCellWidgets.push(cellData);
      }
    } else {
      // Round/Square: 2x3 grid
      for (let row = 0; row < 2; row++) {
        const rowContainer = createWidget(widget.VIRTUAL_CONTAINER, {
          parent: gridContainer,
          layout: {
            x: '0',
            y: '0',
            display: 'flex',
            'flex-flow': 'row',
            width: '100%',
            height: '80px',
            'justify-content': 'center',
            'align-items': 'center',
          },
        });

        for (let col = 0; col < 3; col++) {
          const i = row * 3 + col;
          const cellData = createPrayerTimeCell(rowContainer, PRAYER_LABELS[i], PRAYER_TIMES[i], i);
          prayerCellWidgets.push(cellData);
        }
      }
    }

    const settingsIcon = createWidget(widget.TEXT, {
      parent: container,
      layout: { width: '40px', height: '40px' },
      text: '\u2699\uFE0F',
      color: 0x888888,
      text_size: 24,
      align_h: align.CENTER_H,
      align_v: align.CENTER_V,
    });

    settingsIcon.addEventListener(event.CLICK_UP, () => {
      showToast({ text: 'Settings' });
    });

    updateHighlights(prayerCellWidgets);

    timerId = setInterval(() => {
      tickClock();
      
      // Update countdown
      const newCountdown = getCountdown();
      if (countdownTimerWidget) {
        countdownTimerWidget.setProperty(prop.TEXT, newCountdown.text);
      }
      if (countdownLabelWidget) {
        countdownLabelWidget.setProperty(prop.TEXT, `${getText('until_next')} ${getText(PRAYER_LABELS[newCountdown.index])}`);
      }
      
      updateHighlights(prayerCellWidgets);
    }, 33);
  },

  onDestroy() {
    if (timerId) clearInterval(timerId);
  },
});

.
here are my specs of my Amazfit BIP6:

.
the simulator: