From 3eaebe7b472dd717df537a560f8f33246a6dd0ec Mon Sep 17 00:00:00 2001
From: Sander van Grieken <sander@outrightsolutions.nl>
Date: Tue, 1 Nov 2022 09:42:44 +0100
Subject: [PATCH] qml: flow tags to next line if exceeding most of screen width
 properly update balance amount strings

---
 electrum/gui/qml/components/WalletSummary.qml | 42 +++++++++++++++++--
 electrum/gui/qml/components/main.qml          |  2 +-
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/electrum/gui/qml/components/WalletSummary.qml b/electrum/gui/qml/components/WalletSummary.qml
index cad0cb0b5..88fba5ba9 100644
--- a/electrum/gui/qml/components/WalletSummary.qml
+++ b/electrum/gui/qml/components/WalletSummary.qml
@@ -67,9 +67,12 @@ Item {
 
                 columns: 2
 
-                RowLayout {
+                Flow {
                     Layout.columnSpan: 2
                     Layout.alignment: Qt.AlignHCenter
+                    Layout.preferredWidth: parent.width * 4/5
+                    spacing: constants.paddingMedium
+
                     Tag {
                         text: Daemon.currentWallet.walletType
                         font.pixelSize: constants.fontSizeSmall
@@ -140,7 +143,7 @@ Item {
                     Label {
                         font.pixelSize: constants.fontSizeXLarge
                         font.family: FixedFont
-                        text: Config.formatSats(Daemon.currentWallet.totalBalance)
+                        text: formattedTotalBalance
                     }
                     Label {
                         font.pixelSize: constants.fontSizeXLarge
@@ -158,7 +161,7 @@ Item {
                         visible: Daemon.fx.enabled
                         font.pixelSize: constants.fontSizeLarge
                         color: constants.mutedForeground
-                        text: Daemon.fx.fiatValue(Daemon.currentWallet.totalBalance, false)
+                        text: formattedTotalBalanceFiat
                     }
                     Label {
                         visible: Daemon.fx.enabled
@@ -205,10 +208,41 @@ Item {
         }
     }
 
+    property string formattedTotalBalance
+    property string formattedTotalBalanceFiat
+
+    function setBalances() {
+        root.formattedTotalBalance = Config.formatSats(Daemon.currentWallet.totalBalance)
+        if (Daemon.fx.enabled) {
+            root.formattedTotalBalanceFiat = Daemon.fx.fiatValue(Daemon.currentWallet.totalBalance, false)
+        }
+        piechart.updateSlices()
+    }
+
+
+    // instead of all these explicit connections, we should expose
+    // formatted balances directly as a property
+    Connections {
+        target: Config
+        function onBaseUnitChanged() { setBalances() }
+        function onThousandsSeparatorChanged() { setBalances() }
+    }
+
+    Connections {
+        target: Daemon
+        function onWalletLoaded() { setBalances() }
+    }
+
+    Connections {
+        target: Daemon.fx
+        function onEnabledUpdated() { setBalances() }
+        function onQuotesUpdated() { setBalances() }
+    }
+
     Connections {
         target: Daemon.currentWallet
         function onBalanceChanged() {
-            piechart.updateSlices()
+            setBalances()
         }
     }
 
diff --git a/electrum/gui/qml/components/main.qml b/electrum/gui/qml/components/main.qml
index d162097f4..07662e61c 100644
--- a/electrum/gui/qml/components/main.qml
+++ b/electrum/gui/qml/components/main.qml
@@ -123,7 +123,7 @@ ApplicationWindow
 
             WalletSummary {
                 id: walletSummary
-                Layout.preferredWidth: parent.width
+                Layout.preferredWidth: app.width
             }
         }
     }