Merge #287: Use Flickable instead of Flow for Peers ToggleButtons

1eec3d8 qml: Use Flickable instead of Flow for Peers ToggleButtons (johnny9)

Pull request description:

  [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/287)
  [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/287)
  [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/insecure_mac_arm64_gui.zip?branch=pull/287)
  [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/287)

ACKs for top commit:
  jarolrod:
    ACK 1eec3d8

Tree-SHA512: 80a1b587d859940214a85aeda863bb3a561b9cd5b4db587b9455a7ab9ee36b53951d983955e38056d609dad084458d22354d85e4db6c8d4874bd6b12de61bc6b

Author: hebasto

src/qml/pages/node/Peers.qml

@@ -21,59 +21,67 @@ Page {
         anchors.horizontalCenter: parent.horizontalCenter
         id: description
         width: Math.min(parent.width - 40, 450)
-        text: qsTr("Peers are nodes you are connected to. You want to ensure that you are connected to x, y and z, but not a, b, and c. Learn more.")
+        text: qsTr("Peers are nodes you are connected to. You want to ensure that you are connected" +
+            " to x, y and z, but not a, b, and c. Learn more.")
         font.pixelSize: 13
         color: Theme.color.neutral7
     }
 
-    Flow {
+    Flickable {
         id: sortSelection
         anchors.top: description.bottom
         anchors.topMargin: 20
         anchors.horizontalCenter: parent.horizontalCenter
-        width: Math.min(parent.width - 40, 450)
-        spacing: 10
-        ToggleButton {
-            text: qsTr("ID")
-            autoExclusive: true
-            checked: true
-            onClicked: {
-                peerListModelProxy.sortBy = "nodeId"
+        width: Math.min(parent.width - 40, toggleButtons.width)
+        height: toggleButtons.height
+        contentWidth: toggleButtons.width
+        boundsMovement: width == toggleButtons.width ?
+            Flickable.StopAtBound : Flickable.FollowBoundsBehavior
+        RowLayout {
+            id: toggleButtons
+            spacing: 10
+            ToggleButton {
+                text: qsTr("ID")
+                autoExclusive: true
+                checked: true
+                onClicked: {
+                    peerListModelProxy.sortBy = "nodeId"
+                }
             }
-        }
-        ToggleButton {
-            text: qsTr("Direction")
-            autoExclusive: true
-            onClicked: {
-                peerListModelProxy.sortBy = "direction"
+            ToggleButton {
+                text: qsTr("Direction")
+                autoExclusive: true
+                onClicked: {
+                    peerListModelProxy.sortBy = "direction"
+                }
             }
-        }
-        ToggleButton {
-            text: qsTr("User Agent")
-            autoExclusive: true
-            onClicked: {
-                peerListModelProxy.sortBy = "subversion"
+            ToggleButton {
+                text: qsTr("User Agent")
+                autoExclusive: true
+                onClicked: {
+                    peerListModelProxy.sortBy = "subversion"
+                }
             }
-        }
-        ToggleButton {
-            text: qsTr("Type")
-            autoExclusive: true
-            onClicked: {
-                peerListModelProxy.sortBy = "connectionType"
+            ToggleButton {
+                text: qsTr("Type")
+                autoExclusive: true
+                onClicked: {
+                    peerListModelProxy.sortBy = "connectionType"
+                }
             }
-        }
-        ToggleButton {
-            text: qsTr("Ip")
-            autoExclusive: true
-            onClicked: {
-                peerListModelProxy.sortBy = "address"
+            ToggleButton {
+                text: qsTr("Ip")
+                autoExclusive: true
+                onClicked: {
+                    peerListModelProxy.sortBy = "address"
+                }
             }
-        }
-        ToggleButton {
-            text: qsTr("Network")
-            autoExclusive: true
-            onClicked: {
-                peerListModelProxy.sortBy = "network"
+            ToggleButton {
+                text: qsTr("Network")
+                autoExclusive: true
+                onClicked: {
+                    peerListModelProxy.sortBy = "network"
+                }
             }
         }
     }