qml: make ConfirmTxDialog flickable if content larger than window (fixes #8446)

electrum/gui/qml/components/ConfirmTxDialog.qml

@@ -35,165 +35,173 @@ ElDialog {
     }
 
     ColumnLayout {
-        width: parent.width
-        height: parent.height
+        anchors.fill: parent
         spacing: 0
 
-        GridLayout {
+        Flickable {
             Layout.fillWidth: true
-            Layout.leftMargin: constants.paddingLarge
-            Layout.rightMargin: constants.paddingLarge
+            Layout.fillHeight: true
 
-            columns: 2
+            leftMargin: constants.paddingLarge
+            rightMargin: constants.paddingLarge
 
-            Label {
-                id: amountLabel
-                Layout.fillWidth: true
-                Layout.minimumWidth: implicitWidth
-                text: qsTr('Amount to send')
-                color: Material.accentColor
-            }
-            RowLayout {
-                Layout.fillWidth: true
-                Label {
-                    id: btcValue
-                    font.bold: true
-                    font.family: FixedFont
-                }
+            contentHeight: rootLayout.height
+            clip: true
+            interactive: height < contentHeight
 
-                Label {
-                    text: Config.baseUnit
-                    color: Material.accentColor
-                }
+            GridLayout {
+                id: rootLayout
+                width: parent.width
+
+                columns: 2
 
                 Label {
-                    id: fiatValue
+                    id: amountLabel
                     Layout.fillWidth: true
-                    font.pixelSize: constants.fontSizeMedium
+                    Layout.minimumWidth: implicitWidth
+                    text: qsTr('Amount to send')
+                    color: Material.accentColor
                 }
-
-                Component.onCompleted: updateAmountText()
-                Connections {
-                    target: finalizer
-                    function onEffectiveAmountChanged() {
-                        updateAmountText()
+                RowLayout {
+                    Layout.fillWidth: true
+                    Label {
+                        id: btcValue
+                        font.bold: true
+                        font.family: FixedFont
                     }
-                }
-            }
 
-            Label {
-                text: qsTr('Mining fee')
-                color: Material.accentColor
-            }
+                    Label {
+                        text: Config.baseUnit
+                        color: Material.accentColor
+                    }
 
-            FormattedAmount {
-                amount: finalizer.fee
-            }
+                    Label {
+                        id: fiatValue
+                        Layout.fillWidth: true
+                        font.pixelSize: constants.fontSizeMedium
+                    }
 
-            Label {
-                visible: !finalizer.extraFee.isEmpty
-                text: qsTr('Extra fee')
-                color: Material.accentColor
-            }
+                    Component.onCompleted: updateAmountText()
+                    Connections {
+                        target: finalizer
+                        function onEffectiveAmountChanged() {
+                            updateAmountText()
+                        }
+                    }
+                }
 
-            FormattedAmount {
-                visible: !finalizer.extraFee.isEmpty
-                amount: finalizer.extraFee
-            }
+                Label {
+                    text: qsTr('Mining fee')
+                    color: Material.accentColor
+                }
 
-            Label {
-                text: qsTr('Fee rate')
-                color: Material.accentColor
-            }
+                FormattedAmount {
+                    amount: finalizer.fee
+                }
 
-            RowLayout {
                 Label {
-                    id: feeRate
-                    text: finalizer.feeRate
-                    font.family: FixedFont
+                    visible: !finalizer.extraFee.isEmpty
+                    text: qsTr('Extra fee')
+                    color: Material.accentColor
+                }
+
+                FormattedAmount {
+                    visible: !finalizer.extraFee.isEmpty
+                    amount: finalizer.extraFee
                 }
 
                 Label {
-                    text: 'sat/vB'
+                    text: qsTr('Fee rate')
                     color: Material.accentColor
                 }
-            }
 
-            Label {
-                text: qsTr('Target')
-                color: Material.accentColor
-            }
+                RowLayout {
+                    Label {
+                        id: feeRate
+                        text: finalizer.feeRate
+                        font.family: FixedFont
+                    }
 
-            Label {
-                id: targetdesc
-                text: finalizer.target
-            }
+                    Label {
+                        text: 'sat/vB'
+                        color: Material.accentColor
+                    }
+                }
 
-            RowLayout {
-                Layout.columnSpan: 2
-                Layout.fillWidth: true
+                Label {
+                    text: qsTr('Target')
+                    color: Material.accentColor
+                }
+
+                Label {
+                    id: targetdesc
+                    text: finalizer.target
+                }
 
-                Slider {
-                    id: feeslider
+                RowLayout {
+                    Layout.columnSpan: 2
                     Layout.fillWidth: true
-                    leftPadding: constants.paddingMedium
 
-                    snapMode: Slider.SnapOnRelease
-                    stepSize: 1
-                    from: 0
-                    to: finalizer.sliderSteps
+                    Slider {
+                        id: feeslider
+                        Layout.fillWidth: true
+                        leftPadding: constants.paddingMedium
 
-                    onValueChanged: {
-                        if (activeFocus)
-                            finalizer.sliderPos = value
-                    }
-                    Component.onCompleted: {
-                        value = finalizer.sliderPos
-                    }
-                    Connections {
-                        target: finalizer
-                        function onSliderPosChanged() {
-                            feeslider.value = finalizer.sliderPos
+                        snapMode: Slider.SnapOnRelease
+                        stepSize: 1
+                        from: 0
+                        to: finalizer.sliderSteps
+
+                        onValueChanged: {
+                            if (activeFocus)
+                                finalizer.sliderPos = value
+                        }
+                        Component.onCompleted: {
+                            value = finalizer.sliderPos
+                        }
+                        Connections {
+                            target: finalizer
+                            function onSliderPosChanged() {
+                                feeslider.value = finalizer.sliderPos
+                            }
                         }
                     }
-                }
 
-                FeeMethodComboBox {
-                    id: target
-                    feeslider: finalizer
+                    FeeMethodComboBox {
+                        id: target
+                        feeslider: finalizer
+                    }
                 }
-            }
-
-            InfoTextArea {
-                Layout.columnSpan: 2
-                Layout.fillWidth: true
-                Layout.topMargin: constants.paddingLarge
-                Layout.bottomMargin: constants.paddingLarge
-                visible: finalizer.warning != ''
-                text: finalizer.warning
-                iconStyle: InfoTextArea.IconStyle.Warn
-            }
-
-            Label {
-                text: qsTr('Outputs')
-                Layout.columnSpan: 2
-                color: Material.accentColor
-            }
 
-            Repeater {
-                model: finalizer.outputs
-                delegate: TxOutput {
+                InfoTextArea {
                     Layout.columnSpan: 2
                     Layout.fillWidth: true
+                    Layout.topMargin: constants.paddingLarge
+                    Layout.bottomMargin: constants.paddingLarge
+                    visible: finalizer.warning != ''
+                    text: finalizer.warning
+                    iconStyle: InfoTextArea.IconStyle.Warn
+                }
 
-                    allowShare: false
-                    model: modelData
+                Label {
+                    text: qsTr('Outputs')
+                    Layout.columnSpan: 2
+                    color: Material.accentColor
+                }
+
+                Repeater {
+                    model: finalizer.outputs
+                    delegate: TxOutput {
+                        Layout.columnSpan: 2
+                        Layout.fillWidth: true
+
+                        allowShare: false
+                        model: modelData
+                    }
                 }
             }
         }
 
-        Item { Layout.fillHeight: true; Layout.preferredWidth: 1 }
-
         FlatButton {
             id: sendButton
             Layout.fillWidth: true