fix(StatusChatInfoButton): Add self-calculated implicitWIdth and elide to texts

This commit add elide flags to text in title and subtitle and add flexibility to width. Now compoents use next rules:
1. If width is set - text should be elided when implicit text  width is more than root object width
2. Component grows if width is not set based on inner elements natural sizes

Closes: #335 and #338

ui/StatusQ/sandbox/Controls.qml

@@ -115,6 +115,36 @@ GridLayout {
         pinnedMessagesCount: 1
     }
 
+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 100
+        }
+    }
+
+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias big not elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 400
+        }
+    }
+
     StatusChatInfoButton {
         title: "group"
         subTitle: "Group Chat"

ui/StatusQ/src/StatusQ/Components/StatusChatToolBar.qml

@@ -37,6 +37,7 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.leftMargin: 12
+        width: Math.min(implicitWidth, parent.width - actionButtons.implicitWidth - anchors.leftMargin * 2)
         onClicked: statusChatToolBar.chatInfoButtonClicked()
     }
 

ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -9,8 +9,8 @@ Rectangle {
 
     implicitWidth: identicon.width +
                    Math.max(
-          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width,
-          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width
+                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
+                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
                        ) + 8
     implicitHeight: 48
 
@@ -103,9 +103,16 @@ Rectangle {
             anchors.left: identicon.right
             anchors.leftMargin: 8
 
-            width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0)
+            width: Math.min(parent.width - anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin,
+                            implicitWidth)
             height: chatName.height
 
+            implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
+                           + mutedDelta
+
+            property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
+
             StatusIcon {
                 id: statusIcon
                 anchors.top: parent.top
@@ -139,6 +146,11 @@ Rectangle {
                 anchors.leftMargin: statusIcon.visible ? 1 : 0
                 anchors.top: parent.top
 
+                elide: Text.ElideRight
+                width: Math.min(implicitWidth, parent.width
+                                - statusIcon.width
+                                - statusChatInfoButtonTitle.mutedDelta)
+
                 text: statusChatInfoButton.type === StatusChatInfoButton.Type.PublicChat &&
                       !statusChatInfoButton.title.startsWith("#") ?
                           "#" + statusChatInfoButton.title :
@@ -183,13 +195,26 @@ Rectangle {
             anchors.top: statusChatInfoButtonTitle.bottom
             visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
             height: visible ? chatType.height : 0
-            width: childrenRect.width
+            width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin - 8,
+                            implicitWidth)
+
+            implicitWidth: chatType.implicitWidth + pinIconDelta + 8
+
+
+            property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
+                                                          + divider.width + divider.anchors.leftMargin
+                                                        : 0
 
             StatusBaseText {
                 id: chatType
                 text: statusChatInfoButton.subTitle
                 color: Theme.palette.baseColor1
                 font.pixelSize: 12
+
+                elide: Text.ElideRight
+                width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
+                                implicitWidth)
             }
 
             Rectangle {