Use controls.

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -8,73 +8,47 @@ import Spectral.Dialog 2.0
 import Spectral.Effect 2.0
 import Spectral.Setting 0.1
 
-Control {
-    id: root
+RowLayout {
+    id: row
 
-    padding: 8
+    Avatar {
+        Layout.preferredWidth: 24
+        Layout.preferredHeight: 24
 
-    contentItem: RowLayout {
-        id: row
+        hint: author.displayName
+        source: author.avatarMediaId
+        color: author.color
 
-        Control {
-            Layout.alignment: Qt.AlignTop
+        Component {
+            id: userDetailDialog
 
-            id: authorControl
-
-            padding: 4
-
-            background: Rectangle {
-                radius: height / 2
-                color: author.color
-            }
-
-            contentItem: RowLayout {
-                Avatar {
-                    Layout.preferredWidth: 24
-                    Layout.preferredHeight: 24
-
-                    hint: author.displayName
-                    source: author.avatarMediaId
-                    color: Qt.darker(author.color, 1.1)
-
-                    Component {
-                        id: userDetailDialog
-
-                        UserDetailDialog {}
-                    }
-
-                    RippleEffect {
-                        anchors.fill: parent
-
-                        circular: true
-
-                        onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author.object, "displayName": author.displayName, "avatarMediaId": author.avatarMediaId, "avatarUrl": author.avatarUrl}).open()
-                    }
-                }
-
-                Label {
-                    Layout.alignment: Qt.AlignVCenter
-
-                    text: author.displayName
-                    font.pixelSize: 13
-                    font.weight: Font.Medium
-                    color: "white"
-                    rightPadding: 8
-                }
-            }
+            UserDetailDialog {}
         }
 
-        Label {
-            Layout.fillWidth: true
-            Layout.maximumWidth: messageListView.width - authorControl.width - row.spacing - (root.padding * 2)
+        RippleEffect {
+            anchors.fill: parent
 
-            text: display + " • " + Qt.formatTime(time)
-            color: MPalette.foreground
-            font.pixelSize: 13
-            font.weight: Font.Medium
+            circular: true
 
-            wrapMode: Label.Wrap
-            onLinkActivated: Qt.openUrlExternally(link)
+            onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author.object, "displayName": author.displayName, "avatarMediaId": author.avatarMediaId, "avatarUrl": author.avatarUrl}).open()
         }
     }
+
+    Label {
+        Layout.alignment: Qt.AlignVCenter
+
+        text: author.displayName
+        font.pixelSize: 13
+        font.bold: true
+    }
+
+    Label {
+        text: model.display
+        color: MPalette.foreground
+        font.pixelSize: 13
+        font.weight: Font.Medium
+
+        wrapMode: Label.Wrap
+        onLinkActivated: Qt.openUrlExternally(link)
+    }
 }

imports/Spectral/Component/Timeline/TextDelegate.qml

@@ -2,7 +2,6 @@ import QtQuick 2.12
 
 import org.kde.kirigami 2.4 as Kirigami
 
-
 TextEdit {
     text: "<style>pre {white-space: pre-wrap} a{color: " + Kirigami.Theme.linkColor + ";} .user-pill{}</style>" + model.display
 

imports/Spectral/Component/Timeline/TimelineContainer.qml

@@ -10,12 +10,14 @@ Controls.ItemDelegate {
     horizontalPadding: Kirigami.Units.largeSpacing
     verticalPadding: Kirigami.Units.smallSpacing
 
-    contentItem: Column {
+    contentItem: ColumnLayout {
         id: column
 
         SectionDelegate {
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: Math.min(implicitWidth, parent.width)
+            //            anchors.horizontalCenter: parent.horizontalCenter
+            //            width: Math.min(implicitWidth, parent.width)
+            Layout.maximumWidth: parent.width
+            Layout.alignment: Qt.AlignHCenter
 
             visible: showSection
         }