Fix display of long room names

qml/pages/ChatPage.qml

@@ -15,6 +15,11 @@ Page {
         anchors.fill: parent
 
         PageHeader {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
+
             id: header
             title: room.roomName()
 

qml/pages/MainView.qml

@@ -84,13 +84,19 @@ Page {
                     width: mainRow.width - unreadMessages.width
                     - roomImage.width - 3* Theme.paddingMedium
                     Label {
+                        anchors {
+                            left: parent.left
+                            right: parent.right
+                        }
+
                         id: roomName
                         text: model.roomName
+                        truncationMode: TruncationMode.Fade
                         color: Theme.primaryColor
                         font.pixelSize: Theme.fontSizeLarge
                     }
 
-                    Text {
+                    Label {
                         anchors {
                             left: parent.left
                             right: parent.right
@@ -100,8 +106,9 @@ Page {
                         text: model.lastMessage
                         color: unreadNotifications > 0 ? Theme.primaryColor : Theme.secondaryColor
                         wrapMode: Text.Wrap
-                        elide: Text.ElideRight
+                        truncationMode: TruncationMode.Fade
                         maximumLineCount: 3
+                        font.pixelSize: Theme.fontSizeExtraSmall
                     }
                 }