fix(Communities) Long community names should be truncated

UI issue is fixed, additional similar issue is fixed in CommunityProfilePopup.qml.

Closes: #2492

ui/app/AppLayouts/Chat/CommunityColumn.qml

@@ -15,7 +15,6 @@ Rectangle {
     property Component pinnedMessagesPopupComponent
 
     id: root
-    Layout.fillHeight: true
     color: Style.current.secondaryMenuBackground
 
     Component {
@@ -56,6 +55,7 @@ Rectangle {
             anchors.left: parent.left
             anchors.top: parent.top
             anchors.topMargin: -4
+            width: parent.width - optionsBtn.width - optionsBtn.anchors.rightMargin
         }
 
         StatusRoundButton {

ui/app/AppLayouts/Chat/CommunityComponents/CommunityHeaderButton.qml

@@ -8,7 +8,7 @@ import "../components"
 import "./"
 
 Button {
-    implicitWidth: Math.max(communityImage.width + communityName.width + (Style.current.halfPadding * 3), 200)
+    width: parent.width
     implicitHeight: communityImage.height + Style.current.padding
 
     background: Rectangle {
@@ -49,16 +49,18 @@ Button {
 
         Item { 
             height: childrenRect.height
-            width: childrenRect.width
             anchors.left: communityImage.right
             anchors.leftMargin: Style.current.halfPadding
+            anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
 
             StyledText {
                 id: communityName
+                width: parent.width
                 text: chatsModel.communities.activeCommunity.name
                 font.pixelSize: 15
                 font.weight: Font.Bold
+                elide: Text.ElideRight
             }
 
             StyledText {

ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml

@@ -65,16 +65,29 @@ ModalPopup {
 
         StyledTextEdit {
             id: communityName
-            text: modalHeader.title
+            text: textMetrics.elidedText
             anchors.top: parent.top
             anchors.topMargin: 2
             anchors.left: communityImg.active ? communityImg.right : parent.left
             anchors.leftMargin: communityImg.active ? Style.current.smallPadding : 0
+            anchors.right: parent.right
+            /* Because of ModalPopup's close button we must set rightMargin,
+               cause we don't want overlap it.
+               This should be generally fixed in ModalPopup file. */
+            anchors.rightMargin: 40
             font.bold: true
             font.pixelSize: 17
             readOnly: true
         }
 
+        TextMetrics {
+            id: textMetrics
+            font: communityName.font
+            text: modalHeader.title
+            elideWidth: communityName.width
+            elide: Text.ElideMiddle
+        }
+
         StyledText {
             id: headerDescription
             text: modalHeader.description