fix(InvitationBubbleView): Community invite box cta bleeds out of box

a simple refactor to use a QML Control with separate `background` and
`contentItem`

Fixes: #8360

ui/imports/shared/views/chat/InvitationBubbleView.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.3
+import QtQuick 2.14
-import QtQuick.Dialogs 1.3
+import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import utils 1.0
@@ -12,11 +12,14 @@ import StatusQ.Components 0.1
 import shared.panels 1.0
 import shared.popups 1.0
 
-Item {
+Control {
     id: root
 
-    implicitHeight: loader.height
+    implicitWidth: 270 // by design
-    implicitWidth: loader.width
+    implicitHeight: !d.invitedCommunity ? 0 : Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                                                       implicitContentHeight + verticalPadding)
+
+    padding: 1
 
     property var store
     property string communityId
@@ -69,42 +72,24 @@ Item {
         }
     }
 
-    Loader {
+    background: Rectangle {
-        id: loader
-
-        active: !!d.invitedCommunity
-
-        sourceComponent: Rectangle {
-            id: rectangleBubble
-
-            width: 270
-            height: columnLayout.implicitHeight + border.width * 2
         radius: d.radius
         color: Style.current.background
         border.color: Style.current.border
         border.width: 1
+    }
 
-            ColumnLayout {
+    contentItem: ColumnLayout {
-                id: columnLayout
-                anchors.fill: parent
-                anchors.margins: 1
-
         spacing: 0
 
-                ColumnLayout {
-                    id: invitationDescriptionLayout
-
-                    Layout.leftMargin: d.margin
-                    Layout.rightMargin: d.margin
-                    Layout.topMargin: 8
-                    Layout.bottomMargin: 8
-
-                    spacing: 4
-
         StatusBaseText {
             id: title
 
             Layout.fillWidth: true
+            Layout.leftMargin: d.margin
+            Layout.rightMargin: d.margin
+            Layout.topMargin: 8
+            Layout.bottomMargin: 8
 
             text: d.invitedCommunity.verifed ? qsTr("Verified community invitation") : qsTr("Community invitation")
             color: d.invitedCommunity.verifed ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
@@ -112,32 +97,9 @@ Item {
             font.pixelSize: 13
         }
 
-                    StatusBaseText {
-                        id: invitedYou
-
-                        Layout.fillWidth: true
-
-                        visible: text != ""
-                        text: {
-                            // Not Refactored Yet
-                            return ""
-    //                        if (root.store.chatsModelInst.channelView.activeChannel.chatType === Constants.chatType.oneToOne) {
-    //                            return isCurrentUser ?
-    //                                        qsTr("You invited %1 to join a community").arg(root.store.chatsModelInst.userNameOrAlias(root.store.chatsModelInst.channelView.activeChannel.id))
-    //                                      : qsTr("%1 invited you to join a community").arg(displayUserName)
-    //                        } else {
-    //                            return isCurrentUser ?
-    //                                        qsTr("You shared a community")
-    //                                      : qsTr("A community has been shared")
-    //                        }
-                        }
-                        wrapMode: Text.WordWrap
-                    }
-                }
-
         Rectangle {
             Layout.fillWidth: true
-                    implicitHeight: 1
+            Layout.preferredHeight: 1
             color: Style.current.separator
         }
 
@@ -201,7 +163,7 @@ Item {
 
         Rectangle {
             Layout.fillWidth: true
-                    implicitHeight: 1
+            Layout.preferredHeight: 1
             color: Style.current.separator
         }
 
@@ -224,5 +186,3 @@ Item {
         }
     }
 }
-    }
-}