[Bug] UI Flex: row wrap order differs from expected CSS flexbox behavior

[manuelmaceira]

Description

When rendering a DCL scene UI with flexDirection: 'row' and flexWrap: 'wrap', the button order within each row appears reversed compared to Unity's client.

Steps to reproduce

1. Deploy a scene with a flex container using flexDirection: 'row', flexWrap: 'wrap'
2. Add multiple child elements (e.g., 24 buttons sorted ascending)
3. Compare the visual order between Unity and Godot clients

Expected behavior

Per CSS flexbox spec, flexDirection: 'row' with flexWrap: 'wrap' should lay out items left-to-right, wrapping to the next row below:

Actual behavior

The Godot client renders the items in a different order per row compared to Unity. Both clients appear to diverge from the expected CSS flexbox behavior, but in different ways.

Context

Discovered while testing a color/lighting comparison scene that has time-of-day buttons arranged in a wrapped row layout.

Related

This is a UI layout engine issue, not related to scene logic. The scene provides the elements in the correct ascending order. Whats weird is that unity displays it wrong and godot displays it as expected.

[manuelmaceira]

Expected button order (from scene code)

The scene sorts buttons ascending by time value:

Object.keys(TIME_PRESETS).sort((a, b) => TIME_PRESETS[a] - TIME_PRESETS[b])

With flexDirection: 'row' + flexWrap: 'wrap', the expected layout per CSS flexbox spec is left-to-right, top-to-bottom:

  00:00  01:00  02:00  03:00  04:00  05:00  06:00  07:00
  08:00  09:00  10:00  11:00  12:00  13:00  14:00  15:00
  16:00  17:00  18:00  19:00  20:00  21:00  22:00  23:00

[manuelmaceira]

This means our approach is actually correct but the unity bug means we may have discrepancies on user scenes

[kuruk-mm]

Can you share the coords to test that scene?

[manuelmaceira]

its a test scene that we are using with tox to get color readings https://github.com/dcl-regenesislabs/color-lighting-test-scene