fix(SwapModal): ErrorTag looks wrong

- wrap the ErrorTag in a Loader, and set the width from there
- added tests for the component width with/without the button

Fixes #15788

storybook/qmlTests/tests/tst_ErrorTag.qml

@@ -42,7 +42,21 @@ Item {
         function test_noDefaultButton() {
             verify(!!controlUnderTest)
             const button = findChild(controlUnderTest, "rightComponentButton")
-            tryCompare(button, "visible", false)
+            compare(button, null)
+        }
+
+        function test_correctWidthWithButtonOrWithout() {
+            verify(!!controlUnderTest)
+            waitForRendering(controlUnderTest)
+            const origWidth = controlUnderTest.width
+            controlUnderTest.buttonText = "Buy crypto"
+            controlUnderTest.buttonVisible = true
+            waitForRendering(controlUnderTest)
+            const widthWithButton = controlUnderTest.width
+            verify(widthWithButton > origWidth)
+            controlUnderTest.buttonVisible = false
+            waitForRendering(controlUnderTest)
+            verify(controlUnderTest.width < widthWithButton)
         }
 
         function test_buttonClick() {
@@ -60,9 +74,7 @@ Item {
             verify(!!controlUnderTest)
             controlUnderTest.loading = true
             const button = findChild(controlUnderTest, "rightComponentButton")
-            verify(!!button)
+            compare(button, null)
-            tryCompare(button, "visible", false)
-            mouseClick(button)
             tryCompare(signalSpy, "count", 0)
         }
     }

ui/imports/shared/controls/ErrorTag.qml

@@ -19,7 +19,7 @@ InformationTag {
 
     implicitHeight: 33
     leftPadding: 10
-    rightPadding: 4
+    rightPadding: buttonVisible ? 4 : 8
     verticalPadding: 4
     spacing: 6
 
@@ -50,20 +50,22 @@ InformationTag {
         value: true
     }
 
-    rightComponent: StatusButton {
+    rightComponent: buttonVisible ? rightButtonComponent : undefined
-        objectName: "rightComponentButton"
-        horizontalPadding: 8
 
-        visible: root.buttonVisible
+    Component {
-
+        id: rightButtonComponent
-        size: StatusBaseButton.Size.Tiny
+        StatusButton {
-        font.pixelSize: priv.fontPixelSize
+            objectName: "rightComponentButton"
-        type: StatusBaseButton.Type.Danger
+            horizontalPadding: 8
-        normalColor: priv.foregroundColor
+            size: StatusBaseButton.Size.Tiny
-        hoverColor: Theme.palette.hoverColor(normalColor)
+            font.pixelSize: priv.fontPixelSize
-        textColor: Theme.palette.white
+            type: StatusBaseButton.Type.Danger
-        radius: root.bgRadius
+            normalColor: priv.foregroundColor
-        text: root.buttonText
+            hoverColor: Theme.palette.hoverColor(normalColor)
-        onClicked: root.buttonClicked()
+            textColor: Theme.palette.white
+            radius: root.bgRadius
+            text: root.buttonText
+            onClicked: root.buttonClicked()
+        }
     }
 }

ui/imports/shared/controls/InformationTag.qml

@@ -86,6 +86,8 @@ Control {
         }
         Loader {
             id: rightComponent
+            Layout.preferredWidth: active ? implicitWidth : 0
+            active: !!sourceComponent
         }
     }
 }