Merge remote-tracking branch 'origin/tqtc/lts-6.2.8' into tqtc/lts-6.2-opensource

Conflicts solved in a file:
	dependencies.yaml

Change-Id: Id761143342b5c2b463a5de624dbba6ac0efef349

9 files changed, 601 insertions, 574 deletions

diff --git a/examples/datavisualization/qml3doscilloscope/qml/qml3doscilloscope/main.qml b/examples/datavisualization/qml3doscilloscope/qml/qml3doscilloscope/main.qml
index 51eba416..89d5030d 100644
--- a/examples/datavisualization/qml3doscilloscope/qml/qml3doscilloscope/main.qml
+++ b/examples/datavisualization/qml3doscilloscope/qml/qml3doscilloscope/main.qml
@@ -28,9 +28,8 @@
 ****************************************************************************/
 
 import QtQuick
-import QtQuick.Layouts
 import QtQuick.Controls
-import QtDataVisualization 1.2
+import QtDataVisualization
 import "."
 
 Item {
@@ -42,6 +41,8 @@ Item {
     property int sampleRows: sampleColumns / 2
     property int sampleCache: 24
 
+    property bool portraitMode: width < height
+
     onSampleRowsChanged: {
         surfaceSeries.selectedPoint = surfaceSeries.invalidSelectionPosition
         generateData()
@@ -51,7 +52,7 @@ Item {
         id: dataView
         anchors.bottom: parent.bottom
         width: parent.width
-        height: parent.height - buttonLayout.height
+        height: parent.height - controlArea.height
 
         Surface3D {
             id: surfaceGraph
@@ -118,206 +119,175 @@ Item {
     //! [3]
 
     Rectangle {
-        width: parent.width
-        height: flatShadingToggle.implicitHeight * 2
+        id: controlArea
+        height: portraitMode ? flatShadingToggle.implicitHeight * 7
+                             : flatShadingToggle.implicitHeight * 2
         anchors.left: parent.left
         anchors.top: parent.top
+        anchors.right: parent.right
         color: surfaceGraph.theme.backgroundColor
 
-        ColumnLayout {
-            anchors.fill: parent
-            RowLayout {
-                id: sliderLayout
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-                Layout.minimumHeight: flatShadingToggle.implicitHeight
-                spacing: 0
-
-                Rectangle {
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    Layout.minimumWidth: samplesText.implicitWidth + 120
-                    Layout.maximumWidth: samplesText.implicitWidth + 120
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                    border.color: "gray"
-                    border.width: 1
-                    radius: 4
-
-                    RowLayout {
-                        anchors.fill: parent
-                        anchors.margins: parent.border.width + 1
-
-                        Slider {
-                            id: sampleSlider
-                            Layout.fillHeight: true
-                            Layout.fillWidth: true
-                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                            Layout.minimumWidth: 80
-                            from: mainView.sampleCache * 2
-                            to: from * 10
-                            stepSize: mainView.sampleCache
-                            Component.onCompleted: value = from * 2
-                        }
-
-                        Rectangle {
-                            Layout.fillHeight: true
-                            Layout.fillWidth: true
-                            Layout.minimumWidth: samplesText.implicitWidth + 10
-                            Layout.maximumWidth: samplesText.implicitWidth + 10
-                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                            Text {
-                                id: samplesText
-                                text: "Samples: " + (mainView.sampleRows * mainView.sampleColumns)
-                                anchors.fill: parent
-                                verticalAlignment: Text.AlignVCenter
-                                horizontalAlignment: Text.AlignHCenter
-                            }
-                        }
-                    }
+        // Samples
+        Rectangle {
+            id: samples
+            width: portraitMode ? mainView.width : mainView.width / 4
+            height: flatShadingToggle.implicitHeight
+            anchors.left: parent.left
+            anchors.top: parent.top
+
+            border.color: "gray"
+            border.width: 1
+            radius: 4
+
+            Row {
+                anchors.centerIn: parent
+                spacing: 10
+                padding: 5
+
+                Slider {
+                    id: sampleSlider
+                    from: mainView.sampleCache * 2
+                    to: from * 10
+                    stepSize: mainView.sampleCache
+                    Component.onCompleted: value = from * 2
                 }
 
-                Rectangle {
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    Layout.minimumWidth: frequencyText.implicitWidth + 120
-                    Layout.maximumWidth: frequencyText.implicitWidth + 120
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                    border.color: "gray"
-                    border.width: 1
-                    radius: 4
-
-                    RowLayout {
-                        anchors.fill: parent
-                        anchors.margins: parent.border.width + 1
-
-                        Slider {
-                            id: frequencySlider
-                            Layout.fillHeight: true
-                            Layout.fillWidth: true
-                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                            Layout.minimumWidth: 80
-                            from: 2
-                            to: 60
-                            stepSize: 2
-                            value: 30
-                        }
-
-                        Rectangle {
-                            Layout.fillHeight: true
-                            Layout.fillWidth: true
-                            Layout.minimumWidth: frequencyText.implicitWidth + 10
-                            Layout.maximumWidth: frequencyText.implicitWidth + 10
-                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                            Text {
-                                id: frequencyText
-                                text: "Freq: " + frequencySlider.value + " Hz"
-                                anchors.fill: parent
-                                verticalAlignment: Text.AlignVCenter
-                                horizontalAlignment: Text.AlignHCenter
-                            }
-                        }
-                    }
+                Text {
+                    id: samplesText
+                    text: "Samples: " + (mainView.sampleRows * mainView.sampleColumns)
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
                 }
+            }
+        }
 
-                Rectangle {
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    Layout.minimumWidth: fpsText.implicitWidth + 10
-                    Layout.maximumWidth: fpsText.implicitWidth + 10
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                    border.color: "gray"
-                    border.width: 1
-                    radius: 4
-
-                    Text {
-                        id: fpsText
-                        anchors.fill: parent
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                    }
+        // Frequency
+        Rectangle {
+            id: frequency
+            width: portraitMode ? mainView.width : mainView.width / 4
+            height: flatShadingToggle.implicitHeight
+            anchors.left: portraitMode ? parent.left : samples.right
+            anchors.top: portraitMode ? samples.bottom : parent.top
+
+            border.color: "gray"
+            border.width: 1
+            radius: 4
+
+            Row {
+                anchors.centerIn: parent
+                spacing: 10
+                padding: 5
+
+                Slider {
+                    id: frequencySlider
+                    from: 2
+                    to: 60
+                    stepSize: 2
+                    value: 30
                 }
 
-                Rectangle {
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    Layout.minimumWidth: selectionText.implicitWidth + 10
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-                    border.color: "gray"
-                    border.width: 1
-                    radius: 4
-
-                    Text {
-                        id: selectionText
-                        anchors.fill: parent
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                        text: "No selection"
-                    }
+                Text {
+                    id: frequencyText
+                    text: "Freq: " + frequencySlider.value + " Hz"
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
                 }
             }
+        }
 
-            RowLayout {
-                id: buttonLayout
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-                Layout.minimumHeight: flatShadingToggle.implicitHeight
-                spacing: 0
-
-                Button {
-                    id: flatShadingToggle
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-
-                    text: surfaceSeries.flatShadingSupported ? "Show Flat" : "Flat not supported"
-                    enabled: surfaceSeries.flatShadingSupported
-
-                    onClicked: {
-                        if (surfaceSeries.flatShadingEnabled === true) {
-                            surfaceSeries.flatShadingEnabled = false;
-                            text = "Show Flat"
-                        } else {
-                            surfaceSeries.flatShadingEnabled = true;
-                            text = "Show Smooth"
-                        }
-                    }
-                }
-
-                Button {
-                    id: surfaceGridToggle
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-
-                    text: "Show Surface Grid"
-
-                    onClicked: {
-                        if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) {
-                            surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
-                            text = "Show Surface Grid"
-                        } else {
-                            surfaceSeries.drawMode |= Surface3DSeries.DrawWireframe;
-                            text = "Hide Surface Grid"
-                        }
-                    }
-                }
+        // FPS
+        Rectangle {
+            id: fpsindicator
+            width: portraitMode ? mainView.width : mainView.width / 4
+            height: flatShadingToggle.implicitHeight
+            anchors.left: portraitMode ? parent.left : frequency.right
+            anchors.top: portraitMode ? frequency.bottom : parent.top
+
+            border.color: "gray"
+            border.width: 1
+            radius: 4
+
+            Text {
+                id: fpsText
+                anchors.fill: parent
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
 
-                Button {
-                    id: exitButton
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
+        // Selection
+        Rectangle {
+            id: selection
+            width: portraitMode ? mainView.width : mainView.width / 4
+            height: flatShadingToggle.implicitHeight
+            anchors.left: portraitMode ? parent.left : fpsindicator.right
+            anchors.top: portraitMode ? fpsindicator.bottom : parent.top
+
+            border.color: "gray"
+            border.width: 1
+            radius: 4
+
+            Text {
+                id: selectionText
+                anchors.fill: parent
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+                text: "No selection"
+            }
+        }
 
-                    text: "Quit"
+        // Flat shading
+        Button {
+            id: flatShadingToggle
+            width: portraitMode ? mainView.width : mainView.width / 3
+            anchors.left: parent.left
+            anchors.top: selection.bottom
+
+            text: surfaceSeries.flatShadingSupported ? "Show Flat" : "Flat not supported"
+            enabled: surfaceSeries.flatShadingSupported
+
+            onClicked: {
+                if (surfaceSeries.flatShadingEnabled === true) {
+                    surfaceSeries.flatShadingEnabled = false;
+                    text = "Show Flat"
+                } else {
+                    surfaceSeries.flatShadingEnabled = true;
+                    text = "Show Smooth"
+                }
+            }
+        }
 
-                    onClicked: Qt.quit();
+        // Surface grid
+        Button {
+            id: surfaceGridToggle
+            width: portraitMode ? mainView.width : mainView.width / 3
+            anchors.left: portraitMode ? parent.left : flatShadingToggle.right
+            anchors.top: portraitMode ? flatShadingToggle.bottom : selection.bottom
+
+            text: "Show Surface Grid"
+
+            onClicked: {
+                if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) {
+                    surfaceSeries.drawMode &= ~Surface3DSeries.DrawWireframe;
+                    text = "Show Surface Grid"
+                } else {
+                    surfaceSeries.drawMode |= Surface3DSeries.DrawWireframe;
+                    text = "Hide Surface Grid"
                 }
             }
         }
 
+        // Exit
+        Button {
+            id: exitButton
+            width: portraitMode ? mainView.width : mainView.width / 3
+            anchors.left: portraitMode ? parent.left : surfaceGridToggle.right
+            anchors.top: portraitMode ? surfaceGridToggle.bottom : selection.bottom
+
+            text: "Quit"
+
+            onClicked: Qt.quit();
+        }
     }
 
     //! [4]
diff --git a/examples/datavisualization/qmlaxisdrag/qml/qmlaxisdrag/main.qml b/examples/datavisualization/qmlaxisdrag/qml/qmlaxisdrag/main.qml
index ac4cbd85..b500e412 100644
--- a/examples/datavisualization/qmlaxisdrag/qml/qmlaxisdrag/main.qml
+++ b/examples/datavisualization/qmlaxisdrag/qml/qmlaxisdrag/main.qml
@@ -28,7 +28,7 @@
 ****************************************************************************/
 
 import QtQuick
-import QtDataVisualization 1.1
+import QtDataVisualization
 import QtQuick.Controls
 import "."
 
@@ -45,6 +45,8 @@ Item {
     property int previousMouseX: -1
     property int previousMouseY: -1
 
+    property bool portraitMode: width < height
+
     ListModel {
         id: graphModel
         ListElement{ xPos: 0.0; yPos: 0.0; zPos: 0.0; rotation: "@0,0,0,0" }
@@ -87,7 +89,7 @@ Item {
                 }
             } else {
                 graphModel.remove(2, 10);
-                if (graphModel.count == 2) {
+                if (graphModel.count === 2) {
                     scatterGraph.theme = dynamicColorTheme
                     isIncreasing = true
                 }
@@ -273,9 +275,11 @@ Item {
 
     Button {
         id: rangeToggle
-        width: parent.width / 3 // We're adding 3 buttons and want to divide them equally
+        // We're adding 3 buttons and want to divide them equally, if not in portrait mode
+        width: portraitMode ? parent.width : parent.width / 3
         text: "Use Preset Range"
         anchors.left: parent.left
+        anchors.top: parent.top
         property bool autoRange: true
         onClicked: {
             if (autoRange) {
@@ -302,9 +306,10 @@ Item {
     //! [8]
     Button {
         id: orthoToggle
-        width: parent.width / 3
+        width: portraitMode ? parent.width : parent.width / 3
         text: "Display Orthographic"
-        anchors.left: rangeToggle.right
+        anchors.left: portraitMode ? parent.left : rangeToggle.right
+        anchors.top: portraitMode ? rangeToggle.bottom : parent.top
         onClicked: {
             if (scatterGraph.orthoProjection) {
                 text = "Display Orthographic";
@@ -321,9 +326,10 @@ Item {
 
     Button {
         id: exitButton
-        width: parent.width / 3
+        width: portraitMode ? parent.width : parent.width / 3
         text: "Quit"
-        anchors.left: orthoToggle.right
+        anchors.left: portraitMode ? parent.left : orthoToggle.right
+        anchors.top: portraitMode ? orthoToggle.bottom : parent.top
         onClicked: Qt.quit();
     }
 }
diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
index 76eff0f2..dfebf1b1 100644
--- a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
+++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml
@@ -63,7 +63,7 @@ Item {
         // Set tableView current row to selected bar
         var rowRole = series.dataProxy.rowLabels[position.x];
         var colRole
-        if (barGraph.columnAxis === graphAxes.total)
+        if (barGraph.columnAxis == graphAxes.total)
             colRole = "01";
         else
             colRole = series.dataProxy.columnLabels[position.y];
@@ -83,13 +83,12 @@ Item {
 
     Item {
         id: dataView
-        anchors.right: mainview.right;
+        anchors.right: mainview.right
         anchors.bottom: mainview.bottom
 
         Bars3D {
             id: barGraph
-            width: dataView.width
-            height: dataView.height
+            anchors.fill: parent
             shadowQuality: AbstractGraph3D.ShadowQualityMedium
             selectionMode: AbstractGraph3D.SelectionItem
             theme: Theme3D {
@@ -176,12 +175,9 @@ Item {
         }
     }
 
-
-
     ColumnLayout {
         id: tableViewLayout
 
-
         anchors.top: parent.top
         anchors.left: parent.left
 
@@ -195,7 +191,6 @@ Item {
                 padding: 3
                 text: header.columnNames[index]
             }
-
         }
 
         TableView {
@@ -215,7 +210,6 @@ Item {
                 rows: graphData.modelAsJsArray
             }
 
-
             delegate: Rectangle {
                 implicitHeight: 30
                 implicitWidth: tableView.width / 3
@@ -245,7 +239,6 @@ Item {
                             return display
                         }
                     }
-
                 }
             }
         }
@@ -258,7 +251,7 @@ Item {
         var matches = pattern.exec(timestamp)
         var rowIndex = modelProxy.rowCategoryIndex(matches[1])
         var colIndex
-        if (barGraph.columnAxis === graphAxes.total)
+        if (barGraph.columnAxis == graphAxes.total)
             colIndex = 0 // Just one column when showing yearly totals
         else
             colIndex = modelProxy.columnCategoryIndex(matches[2])
@@ -388,7 +381,7 @@ Item {
             name: "portrait"
             PropertyChanges {
                 target: dataView
-                width: mainview.height / 4 * 3
+                width: mainview.width
                 height: mainview.width
             }
             PropertyChanges  {
diff --git a/examples/datavisualization/qmlcustominput/qml/qmlcustominput/main.qml b/examples/datavisualization/qmlcustominput/qml/qmlcustominput/main.qml
index 77576127..8bd906fd 100644
--- a/examples/datavisualization/qmlcustominput/qml/qmlcustominput/main.qml
+++ b/examples/datavisualization/qmlcustominput/qml/qmlcustominput/main.qml
@@ -38,6 +38,8 @@ Item {
     width: 1280
     height: 720
 
+    property bool portraitMode: width < height
+
     Data {
         id: graphData
     }
@@ -46,7 +48,7 @@ Item {
         id: dataView
         anchors.bottom: parent.bottom
         width: parent.width
-        height: parent.height - buttonLayout.height
+        height: parent.height - (portraitMode ? shadowToggle.height * 3 : shadowToggle.height)
 
         //! [0]
         Scatter3D {
@@ -191,54 +193,50 @@ Item {
     }
     //! [7]
 
-    RowLayout {
-        id: buttonLayout
-        Layout.minimumHeight: shadowToggle.height
-        width: parent.width
+
+    Button {
+        id: shadowToggle
+        width: portraitMode ? parent.width : parent.width / 3
         anchors.left: parent.left
-        spacing: 0
-
-        Button {
-            id: shadowToggle
-            Layout.fillHeight: true
-            Layout.minimumWidth: parent.width / 3 // 3 buttons divided equally in the layout
-            text: scatterGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported"
-            enabled: scatterGraph.shadowsSupported
-
-            onClicked: {
-                if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
-                    scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityMedium;
-                    text = "Hide Shadows";
-                } else {
-                    scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
-                    text = "Show Shadows";
-                }
+        anchors.top: parent.top
+        text: scatterGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported"
+        enabled: scatterGraph.shadowsSupported
+
+        onClicked: {
+            if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
+                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityMedium;
+                text = "Hide Shadows";
+            } else {
+                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
+                text = "Show Shadows";
             }
         }
+    }
 
-        Button {
-            id: cameraToggle
-            Layout.fillHeight: true
-            Layout.minimumWidth: parent.width / 3
-            text: "Pause Camera"
-
-            onClicked: {
-                cameraAnimationX.paused = !cameraAnimationX.paused;
-                cameraAnimationY.paused = cameraAnimationX.paused;
-                if (cameraAnimationX.paused) {
-                    text = "Animate Camera";
-                } else {
-                    text = "Pause Camera";
-                }
+    Button {
+        id: cameraToggle
+        width: portraitMode ? parent.width : parent.width / 3
+        anchors.left: portraitMode ? parent.left : shadowToggle.right
+        anchors.top: portraitMode ? shadowToggle.bottom : parent.top
+        text: "Pause Camera"
+
+        onClicked: {
+            cameraAnimationX.paused = !cameraAnimationX.paused;
+            cameraAnimationY.paused = cameraAnimationX.paused;
+            if (cameraAnimationX.paused) {
+                text = "Animate Camera";
+            } else {
+                text = "Pause Camera";
             }
         }
+    }
 
-        Button {
-            id: exitButton
-            Layout.fillHeight: true
-            Layout.minimumWidth: parent.width / 3
-            text: "Quit"
-            onClicked: Qt.quit();
-        }
+    Button {
+        id: exitButton
+        width: portraitMode ? parent.width : parent.width / 3
+        anchors.left: portraitMode ? parent.left : cameraToggle.right
+        anchors.top: portraitMode ? cameraToggle.bottom : parent.top
+        text: "Quit"
+        onClicked: Qt.quit();
     }
 }
diff --git a/examples/datavisualization/qmlmultigraph/qml/qmlmultigraph/main.qml b/examples/datavisualization/qmlmultigraph/qml/qmlmultigraph/main.qml
index f30b1739..219f22d4 100644
--- a/examples/datavisualization/qmlmultigraph/qml/qmlmultigraph/main.qml
+++ b/examples/datavisualization/qmlmultigraph/qml/qmlmultigraph/main.qml
@@ -38,6 +38,8 @@ Item {
     width: 800
     height: 600
 
+    property bool portratiMode: width < height
+
     Data {
         id: data
     }
@@ -102,7 +104,7 @@ Item {
                     Layout.minimumWidth: parent.width / 2
                     Layout.fillHeight: true
                     Layout.fillWidth: true
-                    text: "Clear Selections"
+                    text: portratiMode ? "Clear\nSelections" : "Clear Selections"
                     onClicked: clearSelections() // call a helper function to keep button itself simpler
                 }
 
@@ -117,14 +119,14 @@ Item {
                 Button {
                     Layout.fillHeight: true
                     Layout.fillWidth: true
-                    text: "Reset Cameras"
+                    text: portratiMode ? "Reset\nCameras" : "Reset Cameras"
                     onClicked: resetCameras() // call a helper function to keep button itself simpler
                 }
 
                 Button {
                     Layout.fillHeight: true
                     Layout.fillWidth: true
-                    text: "Toggle Mesh Styles"
+                    text: portratiMode ? "Toggle\nMesh\nStyles" : "Toggle Mesh Styles"
                     onClicked: toggleMeshStyle() // call a helper function to keep button itself simpler
                 }
             }
diff --git a/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml b/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
index a64538da..97f5082a 100644
--- a/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
+++ b/examples/datavisualization/qmlscatter/qml/qmlscatter/main.qml
@@ -29,9 +29,8 @@
 
 //! [0]
 import QtQuick
-import QtQuick.Layouts
 import QtQuick.Controls
-import QtDataVisualization 1.2
+import QtDataVisualization
 import "."
 //! [0]
 
@@ -42,6 +41,8 @@ Item {
     width: 500
     height: 500
 
+    property bool portraitMode: width < height
+
     //! [4]
     Data {
         id: seriesData
@@ -68,7 +69,8 @@ Item {
         anchors.bottom: parent.bottom
         //! [9]
         width: parent.width
-        height: parent.height - buttonLayout.height
+        height: parent.height - (portraitMode ? shadowToggle.implicitHeight * 3 + 25
+                                              : shadowToggle.implicitHeight + 10)
         //! [8]
 
         //! [2]
@@ -141,103 +143,108 @@ Item {
         }
     }
 
-    RowLayout {
-        id: buttonLayout
-        Layout.minimumHeight: cameraToggle.height
-        width: parent.width
+    //! [7]
+    Button {
+        id: shadowToggle
+        width: portraitMode ? implicitWidth : (mainView.width / 6 - 6)
         anchors.left: parent.left
-        spacing: 0
-        //! [7]
-        Button {
-            id: shadowToggle
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: scatterGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported"
-            enabled: scatterGraph.shadowsSupported
-            onClicked: {
-                if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
-                    scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftLow;
-                    text = "Hide Shadows";
-                } else {
-                    scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
-                    text = "Show Shadows";
-                }
+        anchors.top: parent.top
+        anchors.margins: 5
+        text: scatterGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported"
+        enabled: scatterGraph.shadowsSupported
+        onClicked: {
+            if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
+                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualitySoftLow;
+                text = "Hide Shadows";
+            } else {
+                scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
+                text = "Show Shadows";
             }
         }
-        //! [7]
-
-        Button {
-            id: smoothToggle
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: "Use Smooth for Series One"
-            onClicked: {
-                if (scatterSeries.meshSmooth === false) {
-                    text = "Use Flat for Series One";
-                    scatterSeries.meshSmooth = true;
-                } else {
-                    text = "Use Smooth for Series One"
-                    scatterSeries.meshSmooth = false;
-                }
+    }
+    //! [7]
+
+    Button {
+        id: smoothToggle
+        width: portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        anchors.left: shadowToggle.right
+        anchors.top: parent.top
+        anchors.margins: 5
+        text: "Use Smooth for Series One"
+        onClicked: {
+            if (scatterSeries.meshSmooth === false) {
+                text = "Use Flat for Series One";
+                scatterSeries.meshSmooth = true;
+            } else {
+                text = "Use Smooth for Series One"
+                scatterSeries.meshSmooth = false;
             }
         }
+    }
 
-        Button {
-            id: cameraToggle
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: "Change Camera Placement"
-            onClicked: {
-                if (scatterGraph.scene.activeCamera.cameraPreset === Camera3D.CameraPresetFront) {
-                    scatterGraph.scene.activeCamera.cameraPreset =
-                            Camera3D.CameraPresetIsometricRightHigh;
-                } else {
-                    scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFront;
-                }
+    Button {
+        id: cameraToggle
+        width: portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        anchors.left: portraitMode ? parent.left : smoothToggle.right
+        anchors.top: portraitMode ? smoothToggle.bottom : parent.top
+        anchors.margins: 5
+        text: "Change Camera Placement"
+        onClicked: {
+            if (scatterGraph.scene.activeCamera.cameraPreset === Camera3D.CameraPresetFront) {
+                scatterGraph.scene.activeCamera.cameraPreset =
+                        Camera3D.CameraPresetIsometricRightHigh;
+            } else {
+                scatterGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetFront;
             }
         }
+    }
 
-        Button {
-            id: themeToggle
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: "Change Theme"
-            onClicked: {
-                if (scatterGraph.theme.type === Theme3D.ThemeArmyBlue) {
-                    scatterGraph.theme = themeIsabelle
-                } else {
-                    scatterGraph.theme = themeArmyBlue
-                }
-                if (scatterGraph.theme.backgroundEnabled === true) {
-                    backgroundToggle.text = "Hide Background";
-                } else {
-                    backgroundToggle.text = "Show Background";
-                }
+    Button {
+        id: themeToggle
+        width: portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        anchors.left: cameraToggle.right
+        anchors.top: portraitMode ? smoothToggle.bottom : parent.top
+        anchors.margins: 5
+        text: "Change Theme"
+        onClicked: {
+            if (scatterGraph.theme.type === Theme3D.ThemeArmyBlue) {
+                scatterGraph.theme = themeIsabelle
+            } else {
+                scatterGraph.theme = themeArmyBlue
+            }
+            if (scatterGraph.theme.backgroundEnabled === true) {
+                backgroundToggle.text = "Hide Background";
+            } else {
+                backgroundToggle.text = "Show Background";
             }
         }
+    }
 
-        Button {
-            id: backgroundToggle
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: "Hide Background"
-            onClicked: {
-                if (scatterGraph.theme.backgroundEnabled === true) {
-                    scatterGraph.theme.backgroundEnabled = false;
-                    text = "Show Background";
-                } else {
-                    scatterGraph.theme.backgroundEnabled = true;
-                    text = "Hide Background";
-                }
+    Button {
+        id: backgroundToggle
+        width: portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        anchors.left: portraitMode ? parent.left : themeToggle.right
+        anchors.top: portraitMode ? themeToggle.bottom : parent.top
+        anchors.margins: 5
+        text: "Hide Background"
+        onClicked: {
+            if (scatterGraph.theme.backgroundEnabled === true) {
+                scatterGraph.theme.backgroundEnabled = false;
+                text = "Show Background";
+            } else {
+                scatterGraph.theme.backgroundEnabled = true;
+                text = "Hide Background";
             }
         }
+    }
 
-        Button {
-            id: exitButton
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            text: "Quit"
-            onClicked: Qt.quit();
-        }
+    Button {
+        id: exitButton
+        width: portraitMode ? implicitWidth : (mainView.width / 6 - 6)
+        anchors.left: backgroundToggle.right
+        anchors.top: portraitMode ? themeToggle.bottom : parent.top
+        anchors.margins: 5
+        text: "Quit"
+        onClicked: Qt.quit();
     }
 }
diff --git a/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml b/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml
index 35143179..c866f075 100644
--- a/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml
+++ b/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml
@@ -28,10 +28,9 @@
 ****************************************************************************/
 
 import QtQuick
-import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
-import QtDataVisualization 1.2
+import QtDataVisualization
 import "."
 
 Window {
@@ -42,16 +41,18 @@ Window {
     height: 768
     color: surfaceGraph.theme.windowColor
 
+    property bool portraitMode: width < height
+
     Data {
         id: surfaceData
     }
 
     Item {
         id: surfaceView
-        width: mainview.width
-        height: mainview.height
-        anchors.top: mainview.top
-        anchors.left: mainview.left
+        anchors.top: buttons.bottom
+        anchors.left: parent.left
+        anchors.right: legend.left
+        anchors.bottom: parent.bottom
 
         ColorGradient {
             id: surfaceGradient
@@ -114,8 +115,7 @@ Window {
         Surface3D {
             //! [7]
             id: surfaceGraph
-            width: surfaceView.width
-            height: surfaceView.height
+            anchors.fill: parent
 
             shadowQuality: AbstractGraph3D.ShadowQualityNone
             selectionMode: AbstractGraph3D.SelectionSlice | AbstractGraph3D.SelectionItemAndColumn
@@ -164,26 +164,29 @@ Window {
         //! [0]
     }
 
-    RowLayout {
-        id: buttonLayout
+    Item {
+        id: buttons
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-        opacity: 0.5
+        height: portraitMode ? (polarToggle.height + 10) * 3 : polarToggle.height + 30
+        anchors.margins: 10
 
         //! [3]
         Button {
             id: polarToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Switch to polar"
+            anchors.margins: 5
+            anchors.left: parent.left
+            anchors.top: parent.top
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5
+            text: "Switch to\npolar"
             onClicked: {
                 if (surfaceGraph.polar === false) {
                     surfaceGraph.polar = true
-                    text = "Switch to cartesian"
+                    text = "Switch to\ncartesian"
                 } else {
                     surfaceGraph.polar = false
-                    text = "Switch to polar"
+                    text = "Switch to\npolar"
                 }
             }
         }
@@ -191,9 +194,11 @@ Window {
 
         Button {
             id: orthoToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Switch to perspective"
+            anchors.margins: 5
+            anchors.left: polarToggle.right
+            anchors.top: parent.top
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5
+            text: "Switch to\nperspective"
             onClicked: {
                 if (surfaceGraph.orthoProjection === true) {
                     surfaceGraph.orthoProjection = false;
@@ -201,7 +206,7 @@ Window {
                     yAxis.labelAutoRotation = 30
                     zAxis.labelAutoRotation = 30
                     customInputHandler.rotationEnabled = true
-                    text = "Switch to orthographic"
+                    text = "Switch to\northographic"
                 } else {
                     surfaceGraph.orthoProjection = true;
                     surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetDirectlyAbove
@@ -210,16 +215,18 @@ Window {
                     yAxis.labelAutoRotation = 0
                     zAxis.labelAutoRotation = 0
                     customInputHandler.rotationEnabled = false
-                    text = "Switch to perspective"
+                    text = "Switch to\nperspective"
                 }
             }
         }
 
         Button {
             id: flipGridToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Toggle axis grid on top"
+            anchors.margins: 5
+            anchors.left: portraitMode ? parent.left : orthoToggle.right
+            anchors.top: portraitMode ? orthoToggle.bottom : parent.top
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5
+            text: "Toggle axis\ngrid on top"
             onClicked: {
                 if (surfaceGraph.flipHorizontalGrid === true) {
                     surfaceGraph.flipHorizontalGrid = false;
@@ -231,9 +238,11 @@ Window {
 
         Button {
             id: labelOffsetToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Toggle radial label position"
+            anchors.margins: 5
+            anchors.left: flipGridToggle.right
+            anchors.top: portraitMode ? orthoToggle.bottom : parent.top
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5
+            text: "Toggle radial\nlabel position"
             visible: surfaceGraph.polar
             onClicked: {
                 if (surfaceGraph.radialLabelOffset >= 1.0) {
@@ -246,9 +255,16 @@ Window {
 
         Button {
             id: surfaceGridToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Toggle surface grid"
+            anchors.margins: 5
+            anchors.left: portraitMode ? (labelOffsetToggle.visible ? parent.left
+                                                                    : flipGridToggle.right)
+                                       : (labelOffsetToggle.visible ? labelOffsetToggle.right
+                                                                    : flipGridToggle.right)
+            anchors.top: portraitMode ? (labelOffsetToggle.visible ? labelOffsetToggle.bottom
+                                                                   : orthoToggle.bottom)
+                                      : parent.top
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5
+            text: "Toggle\nsurface grid"
             visible: !surfaceGraph.orthoProjection
             onClicked: {
                 if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) {
@@ -258,46 +274,53 @@ Window {
                 }
             }
         }
-
     }
 
-    Rectangle {
+    Item {
         id: legend
-        anchors.margins: 20
         anchors.bottom: parent.bottom
-        anchors.top: buttonLayout.bottom
+        anchors.top: buttons.bottom
         anchors.right: parent.right
-        border.color: "black"
-        border.width: 1
-        width: 50
-        rotation: 180
-        gradient: Gradient {
-            GradientStop { position: 0.0; color: "black" }
-            GradientStop { position: 0.2; color: "red" }
-            GradientStop { position: 0.5; color: "blue" }
-            GradientStop { position: 0.8; color: "yellow" }
-            GradientStop { position: 1.0; color: "white" }
+        width: portraitMode ? 100 : 125
+
+        Rectangle {
+            id: gradient
+            anchors.margins: 20
+            anchors.bottom: legend.bottom
+            anchors.top: legend.top
+            anchors.right: legend.right
+            border.color: "black"
+            border.width: 1
+            width: portraitMode ? 25 : 50
+            rotation: 180
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "black" }
+                GradientStop { position: 0.2; color: "red" }
+                GradientStop { position: 0.5; color: "blue" }
+                GradientStop { position: 0.8; color: "yellow" }
+                GradientStop { position: 1.0; color: "white" }
+            }
         }
-    }
 
-    Text {
-        anchors.verticalCenter: legend.bottom
-        anchors.right: legend.left
-        anchors.margins: 2
-        text: surfaceGraph.axisY.min  + "%"
-    }
+        Text {
+            anchors.verticalCenter: gradient.bottom
+            anchors.right: gradient.left
+            anchors.margins: 2
+            text: surfaceGraph.axisY.min  + "%"
+        }
 
-    Text {
-        anchors.verticalCenter: legend.verticalCenter
-        anchors.right: legend.left
-        anchors.margins: 2
-        text: (surfaceGraph.axisY.max + surfaceGraph.axisY.min) / 2  + "%"
-    }
+        Text {
+            anchors.verticalCenter: gradient.verticalCenter
+            anchors.right: gradient.left
+            anchors.margins: 2
+            text: (surfaceGraph.axisY.max + surfaceGraph.axisY.min) / 2  + "%"
+        }
 
-    Text {
-        anchors.verticalCenter: legend.top
-        anchors.right: legend.left
-        anchors.margins: 2
-        text: surfaceGraph.axisY.max + "%"
+        Text {
+            anchors.verticalCenter: gradient.top
+            anchors.right: gradient.left
+            anchors.margins: 2
+            text: surfaceGraph.axisY.max + "%"
+        }
     }
 }
diff --git a/examples/datavisualization/qmlsurface/qml/qmlsurface/main.qml b/examples/datavisualization/qmlsurface/qml/qmlsurface/main.qml
index 2124346a..9597a557 100644
--- a/examples/datavisualization/qmlsurface/qml/qmlsurface/main.qml
+++ b/examples/datavisualization/qmlsurface/qml/qmlsurface/main.qml
@@ -28,9 +28,8 @@
 ****************************************************************************/
 
 import QtQuick
-import QtQuick.Layouts
 import QtQuick.Controls
-import QtDataVisualization 1.2
+import QtDataVisualization
 import "."
 
 Rectangle {
@@ -39,16 +38,18 @@ Rectangle {
     height: 768
     color: surfacePlot.theme.windowColor
 
+    property bool portraitMode: width < height
+
     Data {
         id: surfaceData
     }
 
     Item {
         id: surfaceView
-        width: mainview.width
-        height: mainview.height
-        anchors.top: mainview.top
+        anchors.top: buttons.bottom
+        anchors.bottom: mainview.bottom
         anchors.left: mainview.left
+        anchors.right: mainview.right
 
         //! [0]
         ColorGradient {
@@ -75,6 +76,7 @@ Rectangle {
             shadowQuality: AbstractGraph3D.ShadowQualityMedium
             selectionMode: AbstractGraph3D.SelectionSlice | AbstractGraph3D.SelectionItemAndRow
             scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeft
+            scene.activeCamera.zoomLevel: 75
             axisY.min: 0.0
             axisY.max: 500.0
             axisX.segmentCount: 10
@@ -129,18 +131,23 @@ Rectangle {
         }
     }
 
-    RowLayout {
-        id: buttonLayout
+    Item {
+        id: buttons
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
+        anchors.margins: 10
+        height: portraitMode ? surfaceGridToggle.implicitHeight * 3 + 20
+                             : surfaceGridToggle.implicitHeight * 2 + 15
         opacity: 0.5
 
         Button {
             id: surfaceGridToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Show Surface Grid"
+            anchors.margins: 5
+            anchors.left: parent.left
+            anchors.top: parent.top
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 40) / 3
+            text: "Show Surface\nGrid"
             //! [1]
             onClicked: {
                 if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) {
@@ -156,9 +163,11 @@ Rectangle {
 
         Button {
             id: surfaceToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Hide Surface"
+            anchors.margins: 5
+            anchors.left: surfaceGridToggle.right
+            anchors.top: parent.top
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 40) / 3
+            text: "Hide\nSurface"
             //! [8]
             onClicked: {
                 if (surfaceSeries.drawMode & Surface3DSeries.DrawSurface) {
@@ -174,20 +183,22 @@ Rectangle {
 
         Button {
             id: flatShadingToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: surfaceSeries.flatShadingSupported ? "Show Flat" : "Flat not supported"
+            anchors.margins: 5
+            anchors.left: portraitMode ? parent.left : surfaceToggle.right
+            anchors.top: portraitMode ? surfaceToggle.bottom : parent.top
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 40) / 3
+            text: surfaceSeries.flatShadingSupported ? "Show\nFlat" : "Flat not\nsupported"
             enabled: surfaceSeries.flatShadingSupported
             //! [2]
             onClicked: {
                 if (surfaceSeries.flatShadingEnabled === true) {
                     surfaceSeries.flatShadingEnabled = false;
                     heightSeries.flatShadingEnabled = false;
-                    text = "Show Flat"
+                    text = "Show\nFlat"
                 } else {
                     surfaceSeries.flatShadingEnabled = true;
                     heightSeries.flatShadingEnabled = true;
-                    text = "Show Smooth"
+                    text = "Show\nSmooth"
                 }
             }
             //! [2]
@@ -195,41 +206,47 @@ Rectangle {
 
         Button {
             id: backgroundToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Hide Background"
+            anchors.margins: 5
+            anchors.left: portraitMode ? flatShadingToggle.right : parent.left
+            anchors.top: portraitMode ? surfaceToggle.bottom : flatShadingToggle.bottom
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 40) / 3
+            text: "Hide\nBackground"
             onClicked: {
                 if (surfacePlot.theme.backgroundEnabled === true) {
                     surfacePlot.theme.backgroundEnabled = false;
-                    text = "Show Background"
+                    text = "Show\nBackground"
                 } else {
                     surfacePlot.theme.backgroundEnabled = true;
-                    text = "Hide Background"
+                    text = "Hide\nBackground"
                 }
             }
         }
 
         Button {
             id: gridToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Hide Grid"
+            anchors.margins: 5
+            anchors.left: portraitMode ? parent.left : backgroundToggle.right
+            anchors.top: portraitMode ? backgroundToggle.bottom : surfaceToggle.bottom
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 40) / 3
+            text: "Hide\nGrid"
             onClicked: {
                 if (surfacePlot.theme.gridEnabled === true) {
                     surfacePlot.theme.gridEnabled = false;
-                    text = "Show Grid"
+                    text = "Show\nGrid"
                 } else {
                     surfacePlot.theme.gridEnabled = true;
-                    text = "Hide Grid"
+                    text = "Hide\nGrid"
                 }
             }
         }
 
         Button {
             id: seriesToggle
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            text: "Switch to Height Map Series"
+            anchors.margins: 5
+            anchors.left: gridToggle.right
+            anchors.top: portraitMode ? backgroundToggle.bottom : surfaceToggle.bottom
+            width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 40) / 3
+            text: "Switch to\nHeight Map Series"
             //! [3]
             onClicked: {
                 if (surfaceSeries.visible === false) {
@@ -237,13 +254,13 @@ Rectangle {
                     surfaceSeries.visible = true
                     heightSeries.visible = false
                     middleGradient.position = 0.25
-                    text = "Switch to Height Map Series"
+                    text = "Switch to\nHeight Map Series"
                 } else {
                     surfacePlot.axisY.max = 250.0
                     surfaceSeries.visible = false
                     heightSeries.visible = true
                     middleGradient.position = 0.50
-                    text = "Switch to Item Model Series"
+                    text = "Switch to\nItem Model Series"
                 }
             }
             //! [3]
@@ -252,13 +269,13 @@ Rectangle {
 
     function checkState() {
         if (surfaceSeries.drawMode & Surface3DSeries.DrawSurface)
-            surfaceToggle.text = "Hide Surface"
+            surfaceToggle.text = "Hide\nSurface"
         else
-            surfaceToggle.text = "Show Surface"
+            surfaceToggle.text = "Show\nSurface"
 
         if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe)
-            surfaceGridToggle.text = "Hide Surface Grid"
+            surfaceGridToggle.text = "Hide Surface\nGrid"
         else
-            surfaceGridToggle.text = "Show Surface Grid"
+            surfaceGridToggle.text = "Show Surface\nGrid"
     }
 }
diff --git a/examples/datavisualization/qmlsurfacelayers/qml/qmlsurfacelayers/main.qml b/examples/datavisualization/qmlsurfacelayers/qml/qmlsurfacelayers/main.qml
index b2469ba9..b15f8bac 100644
--- a/examples/datavisualization/qmlsurfacelayers/qml/qmlsurfacelayers/main.qml
+++ b/examples/datavisualization/qmlsurfacelayers/qml/qmlsurfacelayers/main.qml
@@ -39,10 +39,11 @@ Item {
     height: 720
 
     property real fontSize: 12
+    property bool portraitMode: width < height
 
     Item {
         id: surfaceView
-        width: mainview.width - buttonLayout.width
+        width: mainview.width - settings.width
         height: mainview.height
         anchors.right: mainview.right;
 
@@ -134,175 +135,185 @@ Item {
         }
     }
 
-    ColumnLayout {
-        id: buttonLayout
-        anchors.top: parent.top
-        anchors.left: parent.left
-        spacing: 0
+    Flickable {
+        id: settings
+        width: buttonLayout.width
+        contentHeight: buttonLayout.height
+        height: mainview.height
 
-        //! [3]
-        GroupBox {
-            Layout.fillWidth: true
-            Column {
-                spacing: 10
+        ColumnLayout {
+            id: buttonLayout
+            anchors.top: parent.top
+            anchors.left: parent.left
+            spacing: 0
 
-                Label {
-                    font.pointSize: fontSize
-                    font.bold: true
-                    text: "Layer Selection"
-                }
+            //! [3]
+            GroupBox {
+                Layout.fillWidth: true
+                Column {
+                    spacing: 10
 
-                CheckBox {
-                    id: layerOneToggle
-                    checked: true
-                    text: "Show Ground Layer"
-                }
+                    Label {
+                        font.pointSize: fontSize
+                        font.bold: true
+                        text: portraitMode ? "Layer\nSelection" : "Layer Selection"
+                    }
 
-                CheckBox {
-                    id: layerTwoToggle
-                    checked: true
-                    text: "Show Sea Layer"
-                }
+                    CheckBox {
+                        id: layerOneToggle
+                        checked: true
+                        text: portraitMode ? "Show\nGround\nLayer" : "Show Ground Layer"
+                    }
 
-                CheckBox {
-                    id: layerThreeToggle
-                    checked: true
-                    text: "Show Tectonic Layer"
+                    CheckBox {
+                        id: layerTwoToggle
+                        checked: true
+                        text: portraitMode ? "Show\nSea\nLayer" : "Show Sea Layer"
+                    }
+
+                    CheckBox {
+                        id: layerThreeToggle
+                        checked: true
+                        text: portraitMode ? "Show\nTectonic\nLayer" : "Show Tectonic Layer"
+                    }
                 }
             }
-        }
-        //! [3]
+            //! [3]
 
-        //! [5]
-        GroupBox {
-            Layout.fillWidth: true
-            Column {
-                spacing: 10
+            //! [5]
+            GroupBox {
+                Layout.fillWidth: true
+                Column {
+                    spacing: 10
 
-                Label {
-                    font.pointSize: fontSize
-                    font.bold: true
-                    text: "Layer Style"
-                }
+                    Label {
+                        font.pointSize: fontSize
+                        font.bold: true
+                        text: portraitMode ? "Layer\nStyle" : "Layer Style"
+                    }
 
-                CheckBox {
-                    id: layerOneGrid
-                    text: "Show Ground as Grid"
-                    onCheckedChanged: {
-                        if (checked)
-                            layerOneSeries.drawMode = Surface3DSeries.DrawWireframe
-                        else
-                            layerOneSeries.drawMode = Surface3DSeries.DrawSurface
+                    CheckBox {
+                        id: layerOneGrid
+                        text: portraitMode ? "Show\nGround\nas Grid" : "Show Ground as Grid"
+                        onCheckedChanged: {
+                            if (checked)
+                                layerOneSeries.drawMode = Surface3DSeries.DrawWireframe
+                            else
+                                layerOneSeries.drawMode = Surface3DSeries.DrawSurface
+                        }
                     }
-                }
 
-                CheckBox {
-                    id: layerTwoGrid
-                    text: "Show Sea as Grid"
+                    CheckBox {
+                        id: layerTwoGrid
+                        text: portraitMode ? "Show\nSea\nas Grid" : "Show Sea as Grid"
 
-                    onCheckedChanged: {
-                        if (checked)
-                            layerTwoSeries.drawMode = Surface3DSeries.DrawWireframe
-                        else
-                            layerTwoSeries.drawMode = Surface3DSeries.DrawSurface
+                        onCheckedChanged: {
+                            if (checked)
+                                layerTwoSeries.drawMode = Surface3DSeries.DrawWireframe
+                            else
+                                layerTwoSeries.drawMode = Surface3DSeries.DrawSurface
+                        }
                     }
-                }
 
-                CheckBox {
-                    id: layerThreeGrid
-                    text: "Show Tectonic as Grid"
-                    onCheckedChanged: {
-                        if (checked)
-                            layerThreeSeries.drawMode = Surface3DSeries.DrawWireframe
-                        else
-                            layerThreeSeries.drawMode = Surface3DSeries.DrawSurface
+                    CheckBox {
+                        id: layerThreeGrid
+                        text: portraitMode ? "Show\nTectonic\nas Grid" : "Show Tectonic as Grid"
+                        onCheckedChanged: {
+                            if (checked)
+                                layerThreeSeries.drawMode = Surface3DSeries.DrawWireframe
+                            else
+                                layerThreeSeries.drawMode = Surface3DSeries.DrawSurface
+                        }
                     }
                 }
             }
-        }
-        //! [5]
+            //! [5]
 
-        //! [6]
-        Button {
-            id: sliceButton
-            text: "Slice All Layers"
-            Layout.fillWidth: true
-            Layout.minimumHeight: 40
-            onClicked: {
-                if (surfaceLayers.selectionMode & AbstractGraph3D.SelectionMultiSeries) {
-                    surfaceLayers.selectionMode = AbstractGraph3D.SelectionRow
-                            | AbstractGraph3D.SelectionSlice
-                    text = "Slice All Layers"
-                } else {
-                    surfaceLayers.selectionMode = AbstractGraph3D.SelectionRow
-                            | AbstractGraph3D.SelectionSlice
-                            | AbstractGraph3D.SelectionMultiSeries
-                    text = "Slice One Layer"
+            //! [6]
+            Button {
+                id: sliceButton
+                text: portraitMode ? "Slice\nAll\nLayers" : "Slice All Layers"
+                Layout.fillWidth: true
+                Layout.minimumHeight: 40
+                onClicked: {
+                    if (surfaceLayers.selectionMode & AbstractGraph3D.SelectionMultiSeries) {
+                        surfaceLayers.selectionMode = AbstractGraph3D.SelectionRow
+                                | AbstractGraph3D.SelectionSlice
+                        text = portraitMode ? "Slice\nAll\nLayers" : "Slice All Layers"
+                    } else {
+                        surfaceLayers.selectionMode = AbstractGraph3D.SelectionRow
+                                | AbstractGraph3D.SelectionSlice
+                                | AbstractGraph3D.SelectionMultiSeries
+                        text = portraitMode ? "Slice\nOne\nLayer" : "Slice One Layer"
+                    }
                 }
             }
-        }
-        //! [6]
+            //! [6]
 
-        Button {
-            id: shadowButton
-            Layout.fillWidth: true
-            Layout.minimumHeight: 40
-            text: surfaceLayers.shadowsSupported ? "Show Shadows" : "Shadows not supported"
-            enabled: surfaceLayers.shadowsSupported
-            onClicked: {
-                if (surfaceLayers.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
-                    surfaceLayers.shadowQuality = AbstractGraph3D.ShadowQualityLow
-                    text = "Hide Shadows"
-                } else {
-                    surfaceLayers.shadowQuality = AbstractGraph3D.ShadowQualityNone
-                    text = "Show Shadows"
+            Button {
+                id: shadowButton
+                Layout.fillWidth: true
+                Layout.minimumHeight: 40
+                text: surfaceLayers.shadowsSupported ? (portraitMode ? "Show\nShadows" : "Show Shadows")
+                                                     : (portraitMode ? "Shadows\nnot\nsupported" : "Shadows not supported")
+                enabled: surfaceLayers.shadowsSupported
+                onClicked: {
+                    if (surfaceLayers.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
+                        surfaceLayers.shadowQuality = AbstractGraph3D.ShadowQualityLow
+                        text = portraitMode ? "Hide\nShadows" : "Hide Shadows"
+                    } else {
+                        surfaceLayers.shadowQuality = AbstractGraph3D.ShadowQualityNone
+                        text = portraitMode ? "Show\nShadows" : "Show Shadows"
+                    }
                 }
             }
-        }
 
-        Button {
-            id: renderModeButton
-            text: "Switch Render Mode"
-            Layout.fillWidth: true
-            Layout.minimumHeight: 40
-            onClicked: {
-                var modeText = "Indirect "
-                var aaText
-                if (surfaceLayers.renderingMode === AbstractGraph3D.RenderIndirect &&
-                        surfaceLayers.msaaSamples === 0) {
-                    surfaceLayers.renderingMode = AbstractGraph3D.RenderDirectToBackground
-                    modeText = "BackGround "
-                } else if (surfaceLayers.renderingMode === AbstractGraph3D.RenderIndirect &&
-                           surfaceLayers.msaaSamples === 4) {
-                    surfaceLayers.renderingMode = AbstractGraph3D.RenderIndirect
-                    surfaceLayers.msaaSamples = 0
-                } else if (surfaceLayers.renderingMode === AbstractGraph3D.RenderIndirect &&
-                           surfaceLayers.msaaSamples === 8) {
-                    surfaceLayers.renderingMode = AbstractGraph3D.RenderIndirect
-                    surfaceLayers.msaaSamples = 4
-                } else {
-                    surfaceLayers.renderingMode = AbstractGraph3D.RenderIndirect
-                    surfaceLayers.msaaSamples = 8
-                }
+            Button {
+                id: renderModeButton
+                text: portraitMode ? "Switch\nRender\nMode" : "Switch Render Mode"
+                Layout.fillWidth: true
+                Layout.minimumHeight: 40
+                onClicked: {
+                    var modeText = "Indirect, "
+                    var aaText
+                    if (surfaceLayers.renderingMode === AbstractGraph3D.RenderIndirect &&
+                            surfaceLayers.msaaSamples === 0) {
+                        surfaceLayers.renderingMode = AbstractGraph3D.RenderDirectToBackground
+                        modeText = "BackGround, "
+                    } else if (surfaceLayers.renderingMode === AbstractGraph3D.RenderIndirect &&
+                               surfaceLayers.msaaSamples === 4) {
+                        surfaceLayers.renderingMode = AbstractGraph3D.RenderIndirect
+                        surfaceLayers.msaaSamples = 0
+                    } else if (surfaceLayers.renderingMode === AbstractGraph3D.RenderIndirect &&
+                               surfaceLayers.msaaSamples === 8) {
+                        surfaceLayers.renderingMode = AbstractGraph3D.RenderIndirect
+                        surfaceLayers.msaaSamples = 4
+                    } else {
+                        surfaceLayers.renderingMode = AbstractGraph3D.RenderIndirect
+                        surfaceLayers.msaaSamples = 8
+                    }
 
-                if (surfaceLayers.msaaSamples <= 0) {
-                    aaText = "No AA"
-                } else {
-                    aaText = surfaceLayers.msaaSamples + "xMSAA"
-                }
+                    if (surfaceLayers.msaaSamples <= 0) {
+                        aaText = "No AA"
+                    } else {
+                        aaText = surfaceLayers.msaaSamples + "xMSAA"
+                    }
 
-                renderLabel.text = modeText + aaText
+                    renderLabel.text = modeText + aaText
+                }
             }
-        }
 
-        TextField {
-            id: renderLabel
-            font.pointSize: fontSize
-            Layout.fillWidth: true
-            Layout.minimumHeight: 40
-            enabled: false
-            horizontalAlignment: TextInput.AlignHCenter
-            text: "Indirect, " + surfaceLayers.msaaSamples + "xMSAA"
+            TextField {
+                id: renderLabel
+                font.pointSize: fontSize
+                Layout.fillWidth: true
+                Layout.minimumHeight: 40
+                color: "gray"
+                enabled: false
+                horizontalAlignment: TextInput.AlignHCenter
+                wrapMode: TextField.WrapAtWordBoundaryOrAnywhere
+                text: "Indirect, " + surfaceLayers.msaaSamples + "xMSAA"
+            }
         }
     }
 }