From ee3e1febb632e951332288d13996c9357d54c792 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= <michalcieslak@status.im>
Date: Thu, 8 Feb 2024 18:00:16 +0100
Subject: [PATCH] fix(StatusModalFooter): Prevent footer's buttons overflow

Closes: #11449
---
 storybook/pages/StatusModalFooterPage.qml     | 73 +++++++++++++++++++
 .../src/StatusQ/Popups/StatusStackModal.qml   |  6 +-
 .../Popups/statusModal/StatusModalFooter.qml  | 15 +++-
 .../popups/SharedAddressesPopup.qml           |  4 +-
 4 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 storybook/pages/StatusModalFooterPage.qml

diff --git a/storybook/pages/StatusModalFooterPage.qml b/storybook/pages/StatusModalFooterPage.qml
new file mode 100644
index 0000000000..9f709d524c
--- /dev/null
+++ b/storybook/pages/StatusModalFooterPage.qml
@@ -0,0 +1,73 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import Storybook 1.0
+
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        PopupBackground {
+            anchors.fill: parent
+        }
+
+        StatusModal {
+            id: footer
+
+            anchors.centerIn: parent
+            height: 300
+            visible: true
+            modal: false
+            closePolicy: Popup.NoAutoClose
+
+            title: "Some modal"
+
+            width: Math.floor(root.width * slider.value)
+
+            rightButtons: [
+                StatusButton {
+                    text: qsTr("Some button")
+                },
+
+                StatusButton {
+                    text: qsTr("Some other button")
+                }
+            ]
+            leftButtons: StatusBackButton {
+                Layout.minimumWidth: implicitWidth
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        SplitView.fillWidth: true
+
+        ColumnLayout {
+            Label {
+                text: `Popup width: ${footer.width}`
+            }
+
+            Slider {
+                id: slider
+
+                from: 0.2
+                to: 1
+                value: 0.5
+            }
+        }
+    }
+}
+
+// category: Components
diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml b/ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml
index ea2746ddf9..df8024aa2d 100644
--- a/ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml
@@ -1,5 +1,5 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -34,6 +34,8 @@ StatusModal {
                 }
             }
         }
+
+        Layout.minimumWidth: implicitWidth
     }
 
     property Item nextButton: StatusButton {
diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
index 4935978338..1750debcde 100644
--- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
+++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalFooter.qml
@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
 
 
 Rectangle {
-    id: statusModalFooter
+    id: root
 
     property list<Item> leftButtons
     property list<StatusBaseButton> rightButtons
@@ -22,15 +22,21 @@ Rectangle {
     onLeftButtonsChanged: {
         for (let idx in leftButtons) {
             leftButtons[idx].parent = leftButtonsLayout
+            leftButtons[idx].Layout.fillWidth
+                    = Qt.binding(() => root.width < root.implicitWidth)
         }
     }
 
     onRightButtonsChanged: {
         for (let idx in rightButtons) {
             rightButtons[idx].parent = rightButtonsLayout
+            rightButtons[idx].Layout.fillWidth
+                    = Qt.binding(() => root.width < root.implicitWidth)
         }
     }
 
+    implicitWidth: rootLayout.implicitWidth + rootLayout.anchors.leftMargin
+                   + rootLayout.anchors.rightMargin
     implicitHeight: rootLayout.implicitHeight + 30
 
     RowLayout {
@@ -45,19 +51,20 @@ Rectangle {
         RowLayout {
             id: leftButtonsLayout
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            visible: statusModalFooter.showFooter
+            visible: root.showFooter
 
             spacing: 16
         }
 
         Item {
             Layout.fillWidth: true
+            Layout.minimumWidth: 16
         }
 
         RowLayout {
             id: rightButtonsLayout
             Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-            visible: statusModalFooter.showFooter
+            visible: root.showFooter
 
             spacing: 16
         }
@@ -70,7 +77,7 @@ Rectangle {
         color: parent.color
 
         StatusModalDivider {
-            visible: (statusModalFooter.leftButtons.length || statusModalFooter.rightButtons.length) && rootLayout.height > 1
+            visible: (root.leftButtons.length || root.rightButtons.length) && rootLayout.height > 1
             anchors.top: parent.top
             width: parent.width
         }
diff --git a/ui/app/AppLayouts/Communities/popups/SharedAddressesPopup.qml b/ui/app/AppLayouts/Communities/popups/SharedAddressesPopup.qml
index ee01da3d1f..9222f9d453 100644
--- a/ui/app/AppLayouts/Communities/popups/SharedAddressesPopup.qml
+++ b/ui/app/AppLayouts/Communities/popups/SharedAddressesPopup.qml
@@ -1,6 +1,6 @@
 import QtQuick 2.15
-import QtQml.Models 2.15
 import QtQuick.Layouts 1.15
+import QtQml.Models 2.15
 
 import StatusQ.Controls 0.1
 import StatusQ.Popups.Dialog 0.1
@@ -94,6 +94,8 @@ StatusDialog {
                 onClicked: {
                     d.displaySigningPanel = false
                 }
+
+                Layout.minimumWidth: implicitWidth
             }
         }
     }