fix(StatusImageWithTitle): Fix position of the edit title button

sandbox/Popups.qml

@@ -73,6 +73,11 @@ Column {
         onClicked: spellMenu.open()
     }
 
+    StatusButton {
+        text: "Modal with Editable Title"
+        onClicked: editTitleModal.open()
+    }
+
     StatusModal {
         id: simpleModal
         anchors.centerIn: parent
@@ -341,6 +346,13 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
     }
 
+    StatusModal {
+        id: editTitleModal
+        anchors.centerIn: parent
+        header.title: "This title can be edited"
+        header.editable: true
+    }
+
     ListModel {
         id: dummyAccountsModel
         ListElement{name: "Account 1"; iconName: "filled-account"}

src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml

@@ -135,17 +135,15 @@ Row {
                 font.bold: true
                 elide: statusImageWithTitle.titleElide
                 color: Theme.palette.directColor1
-                width: !editButton.visible ? parent.width :
-                                             parent.width - editButton.width - parent.spacing
+                width: implicitWidth > parent.width - editButton.width ? parent.width - editButton.width: implicitWidth
             }
             StatusFlatRoundButton {
                 id: editButton
                 objectName: "editAvatarbButton"
                 visible: statusImageWithTitle.editable
-                anchors.bottom: headerTitle.bottom
-                anchors.bottomMargin: -1
+                anchors.verticalCenter: headerTitle.verticalCenter
                 height: 24
-                width: 24
+                width: visible ? 24 : 0
                 type: StatusFlatRoundButton.Type.Secondary
                 icon.name: "pencil"
                 icon.color: Theme.palette.directColor1