fix(StatusModal): ensure header and subtitles elide if needed

Closes #256

ui/StatusQ/sandbox/Popups.qml

@@ -48,6 +48,11 @@ Column {
         onClicked: modalWithIdenticon.open()
     }
 
+    StatusButton {
+        text: "Modal with long titles"
+        onClicked: modalWithLongTitles.open()
+    }
+
     StatusModal {
         id: simpleModal
         anchors.centerIn: parent
@@ -234,4 +239,31 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             }
         ]
     }
+
+    StatusModal {
+        id: modalWithLongTitles
+        anchors.centerIn: parent
+        header.title: "Some super long text here that exceeds the available space"
+        header.subTitle: "Some super long text here that exceeds the available space"
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true
+
+        content: StatusBaseText {
+            id: text
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithContentAccess.contentComponent.text = "Changed!"
+                }
+            }
+        ]
+    }
 }

ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml

@@ -77,15 +77,21 @@ Row {
 
     Column {
         id: textLayout
-
+        width: !iconOrImage.active ? parent.width :
+              parent.width - iconOrImage.width - parent.spacing
         Row {
+            id: headerTitleRow
+            width: parent.width
             spacing: 4
             StatusBaseText {
                 id: headerTitle
                 font.family: Theme.palette.baseFont.name
                 font.pixelSize: 17
                 font.bold: true
+                elide: Text.ElideRight
                 color: Theme.palette.directColor1
+                width: !editButton.visible ? parent.width : 
+                      parent.width - editButton.width - parent.spacing
             }
             StatusFlatRoundButton {
                 id: editButton
@@ -109,6 +115,8 @@ Row {
             font.family: Theme.palette.baseFont.name
             font.pixelSize: 15
             color:Theme.palette.baseColor1
+            width: parent.width
+            elide: Text.ElideRight
         }
     }
 }

ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -31,6 +31,7 @@ Rectangle {
         id: imageWithTitle
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
+        anchors.right: actionButtonLoader.left
         anchors.leftMargin: 16
 
         editable: statusModalHeader.editable