UI alignment issue 4.3.3 vs 4.3.2

mstormi · March 20, 2025, 8:49am

I have been using the following code and on 4.3.2 and earlier, it has been aligning correctly to result in the desired output (pic 1).
Now with the same code on 4.3.3, the inner rectangled widgets aren’t scaled any more to the max (pic2). Now while you might think it still looks fine:
This is PC snapshots, but on mobile, the lacking inner space is totally messing up the rest.

Would anyone know how to fix that so it works on both OH versions, and landscape and upright orientation? Thanks.

config:
  label: Stromrechnung
  sidebar: true
  style:
    background: url(/static/home.png)
    background-opacity: 100%
    background-position: center
    background-size: cover
    height: 200%
  title: Stromrechnung
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        fontSize: 1.0em
                        icon: iconify:carbon:time-plot
                        item: PVRechnung_Periodenstart
                        label: ="seit " + items.PVRechnung_Periodenstart.displayState
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        mediaList: false
                        simpleList: false
                      slots:
                        default:
                          - component: widget:Rechnungseintrag
                            config:
                              color: orange
                              details1Text: Solarstrom
                              details1Value: PVRechnung_PVErtrag
                              details2Text: Verbrauch
                              details2Value: PVRechnung_Gesamtverbrauch
                              details3Text: Netzbezug
                              details3Value: PVRechnung_NetzBezugMonat
                              details4Text: Einspeisung
                              details4Value: PVRechnung_NetzeinspeisungMonat
                              icon: iconify:tabler:solar-panel-2
                              mainText: Autarkie
                              mainValue: PVRechnung_Autarkie
                          - component: widget:Rechnungseintrag
                            config:
                              color: firebrick
                              details1Text: Vergleichstarif
                              details1Value: PVRechnung_Normaltarif
                              details2Text: Strompreis Ø
                              details2Value: PVRechnung_NetzbezugskostenkWh
                              details3Text: EEG Vergütung
                              details3Value: PVRechnung_PreisEinspeisungCt
                              icon: iconify:fluent:money-hand-24-regular
                              mainText: ohne EMS
                              mainValue: PVRechnung_EuroGesamtOhnePVOhneTarif
                          - component: widget:Rechnungseintrag
                            config:
                              color: steelblue
                              details1Text: Netzbezug
                              details1Value: PVRechnung_EuroNetzbezug
                              details2Text: Eigenverbrauch
                              details2Value: PVRechnung_EuroEigenverbrauch
                              details3Text: PV Erstattung
                              details3Value: PVRechnung_EuroEinspeisung
                              details4Text: ohne PV
                              details4Value: PVRechnung_EuroGesamtOhnePV
                              icon: iconify:fluent:money-calculator-24-regular
                              mainText: "Ihre Rechnung "
                              mainValue: PVRechnung_EuroGesamt
                          - component: widget:Rechnungseintrag
                            config:
                              color: forestgreen
                              details1Text: Strom erzeugt
                              details1Value: PVRechnung_PVErtrag
                              details2Text: Strom gerettet
                              details2Value: extraErzeugterStrom
                              details3Text: CO₂ eingespart
                              details3Value: PVRechnung_CO2Einsparung
                              icon: iconify:carbon:energy-renewable
                              mainText: Belohnung
                              mainValue: KlimaBelohnung
masonry: []
grid: []
canvas: []

JustinG · March 20, 2025, 2:31pm

This looks like it is probably the f7 safe area issue that has already been addressed recently. I thought the fix was backported to 4.3, but maybe I am mistaken about that. It is definitely fixed in the 5.0 snapshots.

mstormi · March 20, 2025, 3:44pm

This one? Fix safe area styling issues with card and card contents by florian-h05 · Pull Request #2801 · openhab/openhab-webui · GitHub
Merged October so it should be in 4.3, shouldn’t it?
Reading more closely however, it is about iOS (only maybe?)
@florian-h05 could you comment please?

florian-h05 · March 20, 2025, 3:53pm

This PR is in 4.3.
It is not only about iOS, it affects all devices that define safe areas in the browser environment. That should be every device with notches and I would also think rounded corners, but most prominently iPhones.

@mstormi: Do you use the oh-image-card? 4.3.3 includes oh-image-card: Fix inconsistent image size when action is defined by jimtng · Pull Request #3046 · openhab/openhab-webui · GitHub, which has introduced some regressions, that have been fixed by Fix oh-image-card styling affects all cards by florian-h05 · Pull Request #3065 · openhab/openhab-webui · GitHub. However the last PR has only been backported, but is no part of a patch release yet.

mstormi · March 20, 2025, 4:08pm

Hmm, no I do not. oh-label-cards, oh-list-cards, icons yes but no oh-image-card.
See code above.

Why do both of you think safe area handling applies here? The example pics are taken on PC.
No notches there. And it’s about the left hand side margin of the big box which does not cover the corners. No notches there either, not even on mobiles.

And to put it another way, do you know of a config option to override this (margin-left or similar?)

florian-h05 · March 20, 2025, 4:23pm

I haven’t said that. I commented on the PR you linked.

No image card on any page? Nowhere? It does not matter where the image card is, it just needs/needed to be on some page to corrupt the styling.
Your issue looks exactly like the problem I fixed after the 4.3.3 release.

mstormi · March 20, 2025, 4:40pm

you mean on any of my pages? Hmm, no not even that. Just icons.

admin@smarthouse:/var/lib/openhab/jsondb $ grep -i image uicomponents_ui_*
uicomponents_ui_page.json:                                      "icon": "iconify:material-symbols:reset-image",
uicomponents_ui_page.json:                                      "icon": "iconify:material-symbols:reset-image",
uicomponents_ui_widget.json:                      "backgroundImage": "url(/static/inverter.png)",

Any idea how to force smaller margins left and right of the inner rectangle?

michaeljoos · March 20, 2025, 7:26pm

Is this not the same?

I have updated recently to 5.0 Snapshot and I can confirm it is fixed or was never there.

JustinG · March 20, 2025, 8:58pm

No, This one:

Which although it includes safe area fixes also addresses some of the card margins (sorry I wasn’t clear) and since it appears that the custom widgets you have in the list card are based on cards, I am guessing that the extra space you see is those card margins.

This one was merged into the 5.0 line and I guess it wasn’t backported. If you are not keen on updating you can probably use the card style in those custom Rechnungseintrag widgets to fix those margins.

florian-h05 · March 21, 2025, 7:14am

No, this one is not the issue.
It was backported and is part of 4.3.1.
If the issue arises between 4.3.2 und 4.3.3, this cannot be the reason and I’m pretty sure I linked the cause of the problem above.

@mstormi I can either tell you how to fix the margin by manually setting it, or you can first try the latest 4.3.x build of the UI, containing one additional fix to 4.3.2.
You can download the current 4.3.x UI from JFrog. Open the openHAB Console, get the bundle id of org.openhab.ui. Then execute:

bundle:update BUNDLE_ID JFrog

Please let me know if that helps (and sorry for not using code fences, they are kinda difficult to create on my phone).

mstormi · March 21, 2025, 8:12am

I did for now using margin-left|right XXpx.
Only trouble is I need the same config to work on 4.3.3 AND pre-4.3.3.

@florian-h05 yes that bundle worked out, will use when 4.3.4 is out.

Thanks a lot both of you!

florian-h05 · March 21, 2025, 12:22pm

I’m glad my analysis was correct and the issue is fixed in the actual codebase

DiegoDf · March 21, 2025, 4:46pm

Thanks, I had the same problem. It was fixed by downloading the correct bundle as described here:

At first it did not work as the bundle in the link was not there anymore. I had to change the link to:

https://openhab.jfrog.io/artifactory/sandbox-all/org/openhab/ui/bundles/org.openhab.ui/4.3.4-SNAPSHOT/org.openhab.ui-4.3.4-20250321.114616-51.jar

If someone does this in the coming days, the bundle name will probably change again. Just have a look at the JFrog site to find the correct one.

mstormi · March 30, 2025, 10:57am

@florian-h05 will that change become part of 4.3.4 when @kai starts building it today?

florian-h05 · March 30, 2025, 11:11am

As it is part of the 4.3.x snapshots it will also be a part of any future 4.3.x build.