diff --git a/src/qml/Bubble.qml b/src/qml/Bubble.qml
index c3784b953..c5aa183ce 100644
--- a/src/qml/Bubble.qml
+++ b/src/qml/Bubble.qml
@@ -8,7 +8,6 @@ import QtQuick.Layouts
 import org.kde.kirigami as Kirigami
 
 import org.kde.neochat
-import org.kde.neochat.config
 
 /**
  * @brief A chat bubble for displaying the content of message events.
diff --git a/src/qml/MessageDelegate.qml b/src/qml/MessageDelegate.qml
index 9b7e1bc6c..b3e370314 100644
--- a/src/qml/MessageDelegate.qml
+++ b/src/qml/MessageDelegate.qml
@@ -228,14 +228,14 @@ TimelineDelegate {
      *
      * @note Used for positioning the hover actions.
      */
-    readonly property real bubbleX: bubble.x + avatarBubbleRow.x + mainContainer.leftPadding
+    readonly property real bubbleX: bubble.x + bubble.anchors.leftMargin
 
     /**
      * @brief The y position of the message bubble.
      *
      * @note Used for positioning the hover actions.
      */
-    readonly property real bubbleY: mainContainer.y + (Config.compactLayout ? 0 : mainContainer.topPadding)
+    readonly property alias bubbleY: mainContainer.y
 
     /**
      * @brief The width of the message bubble.
@@ -319,10 +319,13 @@ TimelineDelegate {
         }
         QQC2.ItemDelegate {
             id: mainContainer
-            Layout.fillWidth: true
 
-            leftPadding: Kirigami.Units.smallSpacing
-            rightPadding: Kirigami.Units.largeSpacing
+            Layout.fillWidth: true
+            Layout.topMargin: root.showAuthor || root.alwaysShowAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing)
+            Layout.leftMargin: Kirigami.Units.smallSpacing
+            Layout.rightMargin: Kirigami.Units.smallSpacing
+
+            implicitHeight: Math.max(root.showAuthor || root.alwaysShowAuthor ? avatar.implicitHeight : 0, bubble.height)
 
             Component.onCompleted: {
                 if (root.isReply && root.replyDelegateType === DelegateType.Other) {
@@ -337,60 +340,78 @@ TimelineDelegate {
                 }
             }
 
-            contentItem: RowLayout {
-                RowLayout {
-                    id: avatarBubbleRow
-                    Layout.alignment: _private.showUserMessageOnRight && !Config.compactLayout ? Qt.AlignRight : Qt.AlignLeft
-                    KirigamiComponents.AvatarButton {
-                        id: avatar
-                        Layout.topMargin: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : 0
-                        Layout.alignment: Qt.AlignTop
-                        implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2
-                        implicitHeight: implicitWidth
-
-                        visible: (root.showAuthor || root.alwaysShowAuthor) &&
-                            Config.showAvatarInTimeline &&
-                            (Config.compactLayout || !_private.showUserMessageOnRight)
-                        name: root.author.displayName
-                        source: root.author.avatarSource
-                        color: root.author.color
-                        QQC2.ToolTip.text: root.author.escapedDisplayName
-
-                        onClicked: RoomManager.resolveResource(root.author.id, "mention")
-                    }
-                    Item {
-                        visible: !avatar.visible
-                        implicitWidth: avatar.implicitWidth
-                    }
-                    Bubble {
-                        id: bubble
-                        Layout.fillWidth: Config.compactLayout ? true : false
-                        maxContentWidth: root.contentMaxWidth
-
-                        topPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing
-                        bottomPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing
-                        leftPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
-                        rightPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
-
-                        author: root.author
-                        showAuthor: root.showAuthor || root.alwaysShowAuthor
-                        time: root.time
-                        timeString: root.timeString
-
-                        showHighlight: root.showHighlight
-
-                        isReply: root.isReply
-                        replyId: root.replyId
-                        replyAuthor: root.replyAuthor
-                        replyDelegateType: root.replyDelegateType
-                        replyDisplay: root.replyDisplay
-                        replyMediaInfo: root.replyMediaInfo
-
-                        onReplyClicked: (eventId) => {root.replyClicked(eventId)}
-
-                        showBackground: root.cardBackground && !Config.compactLayout
-                    }
+            KirigamiComponents.AvatarButton {
+                id: avatar
+                width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2: 0
+                height: width
+                anchors {
+                    left: parent.left
+                    leftMargin: Kirigami.Units.smallSpacing
+                    top: parent.top
+                    topMargin: Kirigami.Units.smallSpacing
                 }
+
+                visible: (root.showAuthor || root.alwaysShowAuthor) &&
+                    Config.showAvatarInTimeline &&
+                    (Config.compactLayout || !_private.showUserMessageOnRight)
+                name: root.author.displayName
+                source: root.author.avatarSource
+                color: root.author.color
+                QQC2.ToolTip.text: root.author.escapedDisplayName
+
+                onClicked: RoomManager.resolveResource(root.author.id, "mention")
+            }
+            Bubble {
+                id: bubble
+                anchors.left: avatar.right
+                anchors.leftMargin: Kirigami.Units.largeSpacing
+                anchors.rightMargin: Kirigami.Units.largeSpacing
+                maxContentWidth: root.contentMaxWidth
+
+                topPadding: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : Kirigami.Units.largeSpacing
+                bottomPadding: Config.compactLayout ? Kirigami.Units.mediumSpacing / 2 : Kirigami.Units.largeSpacing
+                leftPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+                rightPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+
+                state: _private.showUserMessageOnRight ? "userMessageOnRight" : "userMessageOnLeft"
+                // states for anchor animations on window resize
+                // as setting anchors to undefined did not work reliably
+                states: [
+                    State {
+                        name: "userMessageOnRight"
+                        AnchorChanges {
+                            target: bubble
+                            anchors.left: undefined
+                            anchors.right: parent.right
+                        }
+                    },
+                    State {
+                        name: "userMessageOnLeft"
+                        AnchorChanges {
+                            target: bubble
+                            anchors.left: avatar.right
+                            anchors.right: undefined
+                        }
+                    }
+                ]
+
+                author: root.author
+                showAuthor: root.showAuthor || root.alwaysShowAuthor
+                time: root.time
+                timeString: root.timeString
+
+                showHighlight: root.showHighlight
+
+                isReply: root.isReply
+                replyId: root.replyId
+                replyAuthor: root.replyAuthor
+                replyDelegateType: root.replyDelegateType
+                replyDisplay: root.replyDisplay
+                replyMediaInfo: root.replyMediaInfo
+
+                onReplyClicked: (eventId) => {root.replyClicked(eventId)}
+
+                showBackground: root.cardBackground && !Config.compactLayout
             }
 
             background: Rectangle {
@@ -413,9 +434,8 @@ TimelineDelegate {
         ReactionDelegate {
             Layout.maximumWidth: root.width - Kirigami.Units.largeSpacing * 2
             Layout.alignment: _private.showUserMessageOnRight ? Qt.AlignRight : Qt.AlignLeft
-            Layout.leftMargin: _private.showUserMessageOnRight ? 0 : bubble.x + mainContainer.leftPadding
+            Layout.leftMargin: _private.showUserMessageOnRight ? 0 : bubble.x + bubble.anchors.leftMargin
             Layout.rightMargin: _private.showUserMessageOnRight ? Kirigami.Units.largeSpacing : 0
-            Layout.bottomMargin: Config.compactLayout ? Kirigami.Units.smallSpacing : 0
 
             visible: root.showReactions
             model: root.reaction
@@ -438,7 +458,7 @@ TimelineDelegate {
             startPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 90
             endPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 60
 
-            parentWidth: mainContainer.availableWidth - (Config.showAvatarInTimeline ? avatar.width + avatarBubbleRow.spacing : 0)
+            parentWidth: mainContainer.availableWidth - (Config.showAvatarInTimeline ? avatar.width + bubble.anchors.leftMargin : 0)
         }
     }
 
diff --git a/src/qml/TimelineDelegate.qml b/src/qml/TimelineDelegate.qml
index d06aebbdd..fcc1c05f5 100644
--- a/src/qml/TimelineDelegate.qml
+++ b/src/qml/TimelineDelegate.qml
@@ -55,7 +55,7 @@ Item {
         id: contentItemParent
         anchors.top: parent.top
         anchors.bottom: parent.bottom
-        anchors.leftMargin: state === "alignLeft" ? Kirigami.Units.smallSpacing : 0
+        anchors.leftMargin: state === "alignLeft" ? Kirigami.Units.largeSpacing : 0
 
         state: Config.compactLayout || root.alwaysMaxWidth ? "alignLeft" : "alignCenter"
         // Align left when in compact mode and center when using bubbles