Unexpected result when using uiVerticalStack and uiHorizontalStack

[Kietyo]

class MyScene : Scene() {
    @OptIn(ExperimentalTime::class)
    override suspend fun SContainer.sceneMain() {
        val sceneWidth = width
        val sceneHeight = height

        uiVerticalStack(sceneWidth, adjustSize = false) {
            uiHorizontalStack(adjustHeight = false) {
                solidRect(100, 100, Colors.BLUE)
                solidRect(100, 100, Colors.RED)
                solidRect(100, 100, Colors.GREEN)
                solidRect(100, 100, Colors.YELLOW)
            }
            uiHorizontalStack(adjustHeight = false) {
                solidRect(100, 100, Colors.YELLOW)
                solidRect(100, 100, Colors.GREEN)
                solidRect(100, 100, Colors.RED)
                solidRect(100, 100, Colors.BLUE)
            }
        }
    }
}

For some reason the top row is shorter

[soywiz]

You can either:

val sceneWidth = width
val sceneHeight = height

uiVerticalStack(sceneWidth, adjustSize = false) {
    uiHorizontalStack(100f, adjustHeight = false) {
        solidRect(100, 100, Colors.BLUE)
        solidRect(100, 100, Colors.RED)
        solidRect(100, 100, Colors.GREEN)
        solidRect(100, 100, Colors.YELLOW)
    }
    uiHorizontalStack(100f, adjustHeight = false) {
        solidRect(100, 100, Colors.YELLOW)
        solidRect(100, 100, Colors.GREEN)
        solidRect(100, 100, Colors.RED)
        solidRect(100, 100, Colors.BLUE)
    }
}

or:

val sceneWidth = width
val sceneHeight = height

uiVerticalStack(sceneWidth, adjustSize = false) {
    uiHorizontalStack(adjustHeight = true) {
        solidRect(100, 100, Colors.BLUE)
        solidRect(100, 100, Colors.RED)
        solidRect(100, 100, Colors.GREEN)
        solidRect(100, 100, Colors.YELLOW)
    }
    uiHorizontalStack(adjustHeight = true) {
        solidRect(100, 100, Colors.YELLOW)
        solidRect(100, 100, Colors.GREEN)
        solidRect(100, 100, Colors.RED)
        solidRect(100, 100, Colors.BLUE)
    }
}

depending on the effect you want to achieve.

The problem was not that the image was smaller, but that the size of the boxes was kept, but the height used for the rows was 32, so the second row was overlapping it. You can check that by pressing F7 and going to those nodes.

[soywiz]

Maybe we could make the first argument (the size) nullable, and when the size is not provided, try to get the maxiumum size from their children