Show own events on right only under certain width

src/qml/Chat/Timeline/EventContent.qml

@@ -9,7 +9,7 @@ import "../../utils.js" as Utils
 Row {
     id: messageContent
     spacing: theme.spacing / 2
-    layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
+    layoutDirection: onRight ? Qt.RightToLeft : Qt.LeftToRight
 
     HUserAvatar {
         id: avatar
@@ -17,7 +17,7 @@ Row {
         width: model.showNameLine ? 48 : 28
         height: combine ? 1 : model.showNameLine ? 48 : 28
         opacity: combine ? 0 : 1
-        visible: ! isOwn
+        visible: ! onRight
     }
 
     Rectangle {
@@ -42,7 +42,7 @@ Row {
 
             HLabel {
                 width: parent.width
-                height: model.showNameLine && ! isOwn && ! combine ?
+                height: model.showNameLine && ! onRight && ! combine ?
                         implicitHeight : 0
                 visible: height > 0
 
@@ -50,7 +50,7 @@ Row {
                 text: senderInfo.displayName || model.senderId
                 color: Utils.nameColor(avatar.name)
                 elide: Text.ElideRight
-                horizontalAlignment: isOwn ? Text.AlignRight : Text.AlignLeft
+                horizontalAlignment: onRight ? Text.AlignRight : Text.AlignLeft
 
                 leftPadding: horizontalPadding
                 rightPadding: horizontalPadding

src/qml/Chat/Timeline/EventDelegate.qml

@@ -27,6 +27,7 @@ Column {
     Component.onCompleted: senderInfo = users.find(model.senderId)
 
     readonly property bool isOwn: chatPage.userId === model.senderId
+    readonly property bool onRight: eventList.ownEventsOnRight && isOwn
 
     readonly property bool isFirstEvent: model.eventType == "RoomCreateEvent"
 
@@ -62,7 +63,7 @@ Column {
         if (nextDelegate) { nextDelegate.reloadPreviousItem() }
     }
 
-    width: parent.width
+    width: eventList.width
 
     topPadding:
         isFirstEvent ? 0 :
@@ -77,6 +78,7 @@ Column {
     }
 
     EventContent {
-        anchors.right: isOwn ? parent.right : undefined
+        anchors.left: parent.left
+        anchors.right: onRight ? parent.right : undefined
     }
 }

src/qml/Chat/Timeline/EventList.qml

@@ -23,6 +23,9 @@ HRectangle {
             }
         }
 
+        property bool ownEventsOnRight:
+            width < theme.chat.eventList.ownEventsOnRightUnderWidth
+
         delegate: EventDelegate {}
 
         anchors.fill: parent