fix(CompactChat): fix margins for images and invites

Fixes #2407

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -171,8 +171,6 @@ Item {
                     return fetchMoreMessagesButtonComponent
                 case Constants.systemMessagePrivateGroupType:
                     return privateGroupHeaderComponent
-                case Constants.communityInviteType:
-                    return invitationBubble
                 default:
                     return isStatusUpdate ? statusUpdateComponent :
                                             (appSettings.useCompactMode ? compactMessageComponent : messageComponent)
@@ -302,15 +300,6 @@ Item {
             container: root
         }
     }
-
-    Component {
-        id: invitationBubble
-        InvitationBubble {
-            communityId: root.communityId
-            anchors.right: !appSettings.useCompactMode && isCurrentUser ? parent.right : undefined
-            anchors.rightMargin: Style.current.padding
-        }
-    }
 }
 
 /*##^##

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -62,8 +62,9 @@ Item {
         anchors.top: dateGroupLbl.visible ? dateGroupLbl.bottom : parent.top
         anchors.topMargin: dateGroupLbl.visible ? Style.current.padding : 0
         height: childrenRect.height
-                + (chatName.visible || emojiReactionLoader.active ? Style.current.smallPadding : 0)
+                + (chatName.visible || emojiReactionLoader.active ? Style.current.halfPadding : 0)
                 + (chatName.visible && emojiReactionLoader.active ? Style.current.padding : 0)
+                + (!chatName.visible && chatImageContent.active ? 6 : 0)
                 + (emojiReactionLoader.active ? emojiReactionLoader.height: 0)
                 + (retry.visible && !chatTime.visible ? Style.current.smallPadding : 0)
         width: parent.width
@@ -134,6 +135,7 @@ Item {
                 id: chatImageContent
                 active: isImage
                 anchors.top: parent.top
+                anchors.topMargin: active ? 6 : 0
                 z: 51
 
                 sourceComponent: Component {
@@ -216,6 +218,19 @@ Item {
                     TransactionBubble {}
                 }
             }
+
+            Loader {
+                active: contentType === Constants.communityInviteType
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.topMargin: active ? 8 : 0
+                sourceComponent: Component {
+                    id: invitationBubble
+                    InvitationBubble {
+                        communityId: container.communityId
+                    }
+                }
+            }
         }
 
 
@@ -253,7 +268,7 @@ Item {
         id: emojiReactionLoader
         active: emojiReactionsModel.length
         anchors.bottom: messageContainer.bottom
-        anchors.bottomMargin: Style.current.smallPadding
+        anchors.bottomMargin: Style.current.halfPadding
         anchors.left: messageContainer.left
         anchors.leftMargin: messageContainer.chatText.textField.leftPadding
 

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/InvitationBubble.qml

@@ -15,7 +15,7 @@ Item {
     id: root
     anchors.left: parent.left
     height: childrenRect.height
-    width: rectangleBubbleLoader.width + chatImage.width
+    width: rectangleBubbleLoader.width
 
     Component.onCompleted: {
         chatsModel.communities.setObservedCommunity(root.communityId)
@@ -23,23 +23,11 @@ Item {
         root.invitedCommunity = chatsModel.communities.observedCommunity
     }
 
-    UserImage {
-        id: chatImage
-        visible: (!isLink && authorCurrentMsg !== authorPrevMsg && !isCurrentUser) ||
-                 (appSettings.useCompactMode && isCurrentUser && authorCurrentMsg !== authorPrevMsg)
-        anchors.left: parent.left
-        anchors.leftMargin: visible ? Style.current.padding : 0
-        anchors.top: parent.top
-    }
-
     Loader {
         id: rectangleBubbleLoader
         active: !!invitedCommunity
         width: item.width
         height: item.height
-        anchors.left: !isLink && (!isCurrentUser || (isCurrentUser === appSettings.useCompactMode)) ? chatImage.right : undefined
-        anchors.leftMargin: isLink ? 0 : Style.current.smallPadding
-        anchors.right: !appSettings.useCompactMode && isCurrentUser ? parent.right : undefined
 
         sourceComponent: Component {
             Rectangle {