RoomHeader buttons and RoomSidePane size/collapse

RoomSidePane's size and collapsing is not bound anymore to the
RoomHeader buttons.

harmonyqml/components/Chat/Chat.qml

@@ -80,15 +80,28 @@ HColumnLayout {
         RoomSidePane {
             id: roomSidePane
 
-            function set_width() { width = referenceWidth }
+            collapsed: width < Layout.minimumWidth + 8
 
-            property int referenceWidth: roomHeader.buttonsWidth
-            onReferenceWidthChanged:
+            property int parentWidth: parent.width
+            property int collapseBelow: 120
+
+            function set_width() {
+                width = parent.width * 0.3 < collapseBelow ?
+                        Layout.minimumWidth : Math.min(parent.width * 0.3, 300)
+            }
+
+            onParentWidthChanged:
                 if (chatSplitView.canAutoSize) { set_width() }
 
             width: set_width()  // Initial width
             Layout.minimumWidth: HStyle.avatar.size
             Layout.maximumWidth: parent.width
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: chatSplitView.canAutoSize ? 120 : 0
+                }
+            }
         }
     }
 }

harmonyqml/components/Chat/RoomHeader.qml

@@ -6,14 +6,14 @@ HRectangle {
     property string displayName: ""
     property string topic: ""
 
-    property bool collapseButtons: width < 480
-    property alias buttonsWidth: viewButtons.width
+    property bool collapseButtons: width < 400
 
     id: roomHeader
     color: HStyle.chat.roomHeader.background
 
     HRowLayout {
         id: row
+        spacing: 8
         anchors.fill: parent
 
         HAvatar {
@@ -30,11 +30,12 @@ HRectangle {
             elide: Text.ElideRight
             maximumLineCount: 1
 
-            Layout.maximumWidth:
+            Layout.maximumWidth: Math.max(
+                0,
                 row.width - Layout.leftMargin * 2 - avatar.width -
                 viewButtons.width -
                 (expandButton.visible ? expandButton.width : 0)
-            Layout.leftMargin: 8
+            )
         }
 
         HLabel {
@@ -44,18 +45,19 @@ HRectangle {
             elide: Text.ElideRight
             maximumLineCount: 1
 
-            Layout.maximumWidth:
-                row.width - Layout.leftMargin * 2 - avatar.width -
+            Layout.maximumWidth: Math.max(
+                0,
+                row.width - row.totalSpacing - avatar.width -
                 roomName.width - viewButtons.width -
                 (expandButton.visible ? expandButton.width : 0)
-            Layout.leftMargin: 8
+            )
         }
 
         HSpacer {}
 
         Row {
             id: viewButtons
-            Layout.maximumWidth: collapseButtons ? 0 : implicitWidth
+            Layout.preferredWidth: collapseButtons ? 0 : implicitWidth
 
             HButton {
                 iconName: "room_view_members"
@@ -77,7 +79,7 @@ HRectangle {
                 iconName: "room_view_settings"
             }
 
-            Behavior on Layout.maximumWidth {
+            Behavior on Layout.preferredWidth {
                 NumberAnimation { id: buttonsAnimation; duration: 120 }
             }
         }

harmonyqml/components/Chat/RoomSidePane/MembersView.qml

@@ -4,10 +4,8 @@ import "../../Base"
 
 Column {
     property int normalSpacing: 8
-    property bool collapsed:
-        width < roomSidePane.Layout.minimumWidth + normalSpacing
 
-    leftPadding: collapsed ? 0 : normalSpacing
+    leftPadding: roomSidePane.collapsed ? 0 : normalSpacing
     rightPadding: leftPadding
 
     ListView {
@@ -16,7 +14,7 @@ Column {
 
         id: memberList
 
-        spacing: collapsed ? 0 : normalSpacing
+        spacing: parent.leftPadding
         topMargin: spacing
         bottomMargin: topMargin
 

harmonyqml/components/Chat/RoomSidePane/RoomSidePane.qml

@@ -5,6 +5,8 @@ import "../../Base"
 HRectangle {
     id: roomSidePane
 
+    property bool collapsed: false
+
     HColumnLayout {
         anchors.fill: parent