Fix banners, adapt to app width

src/qml/Chat/Banners/Banner.qml

@@ -7,8 +7,7 @@ import "../../Base"
 
 HRectangle {
     id: banner
-    Layout.fillWidth: true
-    Layout.preferredHeight: theme.baseElementsHeight
+    implicitHeight: childrenRect.height
 
     property alias avatar: bannerAvatar
     property alias icon: bannerIcon
@@ -16,73 +15,81 @@ HRectangle {
     property alias buttonModel: bannerRepeater.model
     property var buttonCallbacks: []
 
-    HRowLayout {
-        id: bannerRow
-        anchors.fill: parent
-
-        HUserAvatar {
-            id: bannerAvatar
-        }
-
-        HIcon {
-            id: bannerIcon
-            dimension: bannerLabel.implicitHeight
-            visible: Boolean(svgName)
-
-            Layout.leftMargin: theme.spacing / 2
-        }
-
-        HLabel {
-            id: bannerLabel
-            textFormat: Text.StyledText
-            elide: Text.ElideRight
-
-            visible:
-                bannerRow.width - bannerAvatar.width - bannerButtons.width > 30
-
-            Layout.fillWidth: true
-            Layout.leftMargin: bannerIcon.Layout.leftMargin
-            Layout.rightMargin: Layout.leftMargin
-        }
-
-        HSpacer {}
+    HGridLayout {
+        id: bannerGrid
+        width: parent.width
+        flow: bannerAvatarWrapper.width +
+              bannerIcon.width +
+              bannerLabel.implicitWidth +
+              bannerButtons.width >
+              parent.width ?
+              GridLayout.TopToBottom : GridLayout.LeftToRight
 
         HRowLayout {
-            id: bannerButtons
+            id: bannerRow
 
-            function getButtonsWidth() {
-                var total = 0
+            HRectangle {
+                id: bannerAvatarWrapper
+                color: "black"
 
-                for (var i = 0; i < bannerRepeater.count; i++) {
-                    total += bannerRepeater.itemAt(i).implicitWidth
+                Layout.preferredWidth: bannerAvatar.width
+                Layout.minimumHeight: bannerAvatar.height
+                Layout.preferredHeight: bannerLabel.height
+
+                HUserAvatar {
+                    id: bannerAvatar
+                    anchors.centerIn: parent
                 }
-
-                return total
             }
 
-            property bool compact:
-                bannerRow.width <
-                bannerAvatar.width +
-                bannerLabel.implicitWidth +
-                bannerLabel.Layout.leftMargin +
-                bannerLabel.Layout.rightMargin +
-                getButtonsWidth()
+            HIcon {
+                id: bannerIcon
+                dimension: bannerLabel.implicitHeight
+                visible: Boolean(svgName)
 
-            Repeater {
-                id: bannerRepeater
-                model: []
+                Layout.leftMargin: theme.spacing / 2
+            }
 
-                HUIButton {
-                    id: button
-                    text: modelData.text
-                    iconName: modelData.iconName
-                    onClicked: buttonCallbacks[modelData.name](button)
+            HLabel {
+                id: bannerLabel
+                textFormat: Text.StyledText
+                wrapMode: Text.Wrap
 
-                    clip: true
-                    Layout.maximumWidth: bannerButtons.compact ? height : -1
-                    Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.leftMargin: bannerIcon.Layout.leftMargin
+                Layout.rightMargin: Layout.leftMargin
+            }
+
+            HSpacer {}
+        }
+
+        HRowLayout {
+            HRowLayout {
+                id: bannerButtons
+
+                Repeater {
+                    id: bannerRepeater
+                    model: []
+
+                    HUIButton {
+                        id: button
+                        text: modelData.text
+                        iconName: modelData.iconName
+                        onClicked: buttonCallbacks[modelData.name](button)
+
+                        Layout.preferredHeight: theme.baseElementsHeight
+                    }
                 }
             }
+
+            HRectangle {
+                id: buttonsRightPadding
+                color: theme.controls.button.background
+                visible: bannerGrid.flow == GridLayout.TopToBottom
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
         }
     }
 }

src/qml/Chat/Chat.qml

@@ -55,10 +55,14 @@ HColumnLayout {
             InviteBanner {
                 visible: category == "Invites"
                 inviterId: roomInfo.inviterId
+
+                Layout.fillWidth: true
             }
 
             //UnknownDevicesBanner {
                 //visible: category == "Rooms" && hasUnknownDevices
+                //
+                //Layout.fillWidth: true
             //}
 
             SendBox {
@@ -69,6 +73,8 @@ HColumnLayout {
             LeftBanner {
                 visible: category == "Left"
                 userId: chatPage.userId
+
+                Layout.fillWidth: true
             }
         }