GridLayout in a ScrollView adjust to width change

[oranm]

Hello everyone,
We are working on a Qt for WebAssembly application.
The main component is a GridLayout with 2 columns and we also want to make it work on a mobile screen.
So based on the width we make the grid with 2 rows and a single column.

Unfortunately when viewing it on mobile the Flickable id: flick (which is inside ColumnLayout id: left is not showing at all at the bottom in some cases and sometimes only shows a small part of the Flickable .

Below there is what I mean about showing small part of the Flickable (marked with red).

Screenshot 2024-05-19 210236.jpg

I want to make it stretch down and fill the remaining height at the bottom of it as much as possible.

The code snippet is here: https://gist.github.com/oranmehavi/9...8c0131988c55d4
Any help with how to achieve this will be much appreciated

[oranm]

I think I came up with something that seems to work but not sure if this is a good way to do this (I also changed from ScrollView to Flickable because I saw online that it is better suited for touch devices.)

Flickable {
 
        id: scroller
        anchors.fill: parent
        contentHeight: main.height
        contentWidth: main.width
        GridLayout {
            id: main
            height: scroller.width > 600 ? scroller.height : children.length * 800
            width: scroller.width
 
            columns: 2
 
            states: [
                State {
                    when: root.width <= 600
                    PropertyChanges {target: left; Layout.row: 1}
                    PropertyChanges {target: right; Layout.row: 0}
                },
                State {
                    when: root.width > 600
                    PropertyChanges {target: left; Layout.column: 0}
                    PropertyChanges {target: right; Layout.column: 1}
                }
            ]

Flickable {

        id: scroller
        anchors.fill: parent
        contentHeight: main.height
        contentWidth: main.width
        GridLayout {
            id: main
            height: scroller.width > 600 ? scroller.height : children.length * 800
            width: scroller.width

            columns: 2

            states: [
                State {
                    when: root.width <= 600
                    PropertyChanges {target: left; Layout.row: 1}
                    PropertyChanges {target: right; Layout.row: 0}
                },
                State {
                    when: root.width > 600
                    PropertyChanges {target: left; Layout.column: 0}
                    PropertyChanges {target: right; Layout.column: 1}
                }
            ]

To copy to clipboard, switch view to plain text mode 

Basically I set the GridLayout's height to the height of the scroller or to a very high height (800 * children.length) if the width gets narrower (<= 600 in this case).

Is there a better way to do it or is it "good enough"?