Simplify timeline structure and fix text wrapping bug

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -25,10 +25,12 @@ RowLayout {
     id: root
 
     spacing: Kirigami.Units.largeSpacing
+    Layout.leftMargin: Kirigami.Units.smallSpacing
+    Layout.rightMargin: Kirigami.Units.smallSpacing
 
     Kirigami.Avatar {
-        Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
+        Layout.preferredWidth: Kirigami.Units.gridUnit * 2
-        Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
+        Layout.preferredHeight: Kirigami.Units.gridUnit * 2
 
         Layout.alignment: Qt.AlignTop
 
@@ -39,97 +41,74 @@ RowLayout {
     }
 
     Item {
-        Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
+        Layout.preferredWidth: Kirigami.Units.gridUnit * 2
         Layout.preferredHeight: 1
 
         visible: !showAuthor
     }
     
-    Item {
+    ColumnLayout {
-        Layout.preferredWidth: column.width + 16
+        id: column
-		Layout.preferredHeight: column.height + 16
+        Layout.fillWidth: true
+        spacing: Kirigami.Units.smallSpacing
 
-        /*RectangularGlow {
+        Controls.Label {
-            anchors.fill: messageBubble
-            glowRadius: 0.8
-            spread: 0.3
-            cornerRadius: messageBubble.radius + glowRadius
-            color: Qt.darker(messageBubble.color, 1.2)
-        }*/
-        
-        // inner area of the message bubble
-        /*Rectangle {
-            id: messageBubble
-            anchors.fill: parent
-            radius: 2
-            color: authorColor
-        }*/
-
-
-        ColumnLayout {
-            id: column
             Layout.fillWidth: true
-            anchors.centerIn: parent
-            spacing: Kirigami.Units.smallSpacing
 
-            Controls.Label {
+            visible: showAuthor
-                Layout.fillWidth: true
 
-                visible: showAuthor
+            text: author.displayName
+            font.bold: true
+            color: Kirigami.Theme.activeTextColor
+            wrapMode: Text.Wrap
+        }
 
-                text: author.displayName
+        RowLayout {
-                font.bold: true
+            Layout.fillWidth: true
-                color: Kirigami.Theme.activeTextColor
+
-                wrapMode: Text.Wrap
+            visible: replyVisible
+
+            Rectangle {
+                Layout.preferredWidth: 4
+                Layout.fillHeight: true
+
+                color: Kirigami.Theme.highlightColor
             }
 
-            RowLayout {
+            Kirigami.Avatar {
+                Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
+                Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
+                Layout.alignment: Qt.AlignTop
+
+                source: replyVisible && reply.author.avatarMediaId ? "image://mxc/" + reply.author.avatarMediaId : ""
+                name: replyVisible ? reply.author.displayName : "H"
+                color: replyVisible ? reply.author.color : MPalette.accent
+            }
+
+            ColumnLayout {
                 Layout.fillWidth: true
 
-                visible: replyVisible
+                Controls.Label {
-
-                Rectangle {
-                    Layout.preferredWidth: 4
-                    Layout.fillHeight: true
-
-                    color: Kirigami.Theme.highlightColor
-                }
-
-                Kirigami.Avatar {
-                    Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
-                    Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
-                    Layout.alignment: Qt.AlignTop
-
-                    source: replyVisible && reply.author.avatarMediaId ? "image://mxc/" + reply.author.avatarMediaId : ""
-                    name: replyVisible ? reply.author.displayName : "H"
-                    color: replyVisible ? reply.author.color : MPalette.accent
-                }
-
-                ColumnLayout {
                     Layout.fillWidth: true
 
-                    Controls.Label {
+                    text: replyVisible ? reply.author.displayName : ""
-                        Layout.fillWidth: true
+                    color: Kirigami.Theme.activeTextColor
+                    wrapMode: Text.Wrap
+                }
 
-                        text: replyVisible ? reply.author.displayName : ""
+                Text {
-                        color: Kirigami.Theme.activeTextColor
+                    Layout.fillWidth: true
-                        wrapMode: Text.Wrap
-                    }
 
-                    Text {
+                    text: replyVisible ? reply.display : ""
-                        Layout.fillWidth: true
 
-                        text: replyVisible ? reply.display : ""
+                    color: Kirigami.Theme.textColor
+//                    selectionColor: Kirigami.Theme.highlightColor
+//                    selectedTextColor: Kirigami.Theme.highlightedTextColor
 
-                        color: Kirigami.Theme.textColor
+//                    selectByMouse: true
-    //                    selectionColor: Kirigami.Theme.highlightColor
+//                    readOnly: true
-    //                    selectedTextColor: Kirigami.Theme.highlightedTextColor
+                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-
+                    textFormat: Text.RichText
-    //                    selectByMouse: true
-    //                    readOnly: true
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                        textFormat: Text.RichText
-                    }
                 }
             }
         }

imports/Spectral/Component/Timeline/TextDelegate.qml

@@ -16,7 +16,8 @@ Text {
 
 //    selectByMouse: true
 //    readOnly: true
-    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+    wrapMode: Text.WordWrap
+    width: parent.width
     textFormat: Text.RichText
 }
 

imports/Spectral/Panel/RoomPanel.qml

@@ -190,6 +190,7 @@ Kirigami.ScrollablePage {
 
                     innerObject: MessageDelegate {
                         Layout.fillWidth: true
+                        Layout.maximumWidth: messageListView.width
 
                         innerObject: TextDelegate {
                             Layout.fillWidth: true