Improve MainPane when reduced to minimumSize

src/gui/MainPane/Account.qml

@@ -23,6 +23,9 @@ HTileDelegate {
         userId: model.id
         displayName: model.display_name
         mxc: model.avatar_url
+        rotation: mainPane.small ? -45 : 0
+
+        Behavior on rotation { HNumberAnimation {} }
     }
 
     contextMenu: HMenu {
@@ -69,7 +72,23 @@ HTileDelegate {
 
     Behavior on title.color { HColorAnimation {} }
     Behavior on opacity { HNumberAnimation {} }
+    Behavior on leftPadding { HNumberAnimation {} }
+    Behavior on topPadding { HNumberAnimation {} }
 
+    Binding on leftPadding {
+        value: (mainPane.minimumSize - loadedImage.width) / 2
+        when: mainPane.small
+    }
+
+    Binding on topPadding {
+        value: theme.spacing
+        when: mainPane.small
+    }
+
+    Binding on bottomPadding {
+        value: theme.spacing
+        when: mainPane.small
+    }
 
     HRowLayout {
         HButton {

src/gui/MainPane/AccountRoomsList.qml

@@ -7,6 +7,7 @@ import "../Base"
 HListView {
     id: mainPaneList
     model: ModelStore.get("accounts")
+    spacing: mainPane.small ? theme.spacing : 0
 
     delegate: AccountRoomsDelegate {
         width: mainPaneList.width
@@ -32,10 +33,14 @@ HListView {
             currentItem.roomList.currentItem.height :
             currentItem.account.height
 
-        color: theme.controls.listView.highlight
+        color:
+            mainPane.small ?
+            theme.controls.listView.smallPaneHighlight :
+            theme.controls.listView.highlight
 
         Behavior on y { HNumberAnimation { id: yAnimation } }
         Behavior on height { HNumberAnimation {} }
+        Behavior on color { HColorAnimation {} }
 
         Binding {
             target: mainPaneList
@@ -69,6 +74,7 @@ HListView {
         model.findIndex(window.uiState.pageProperties.userId) : null
 
 
+
     function previous() {
         detachedCurrentIndex = true
 

src/gui/MainPane/MainPane.qml

@@ -8,16 +8,22 @@ HDrawer {
     id: mainPane
     saveName: "mainPane"
     color: theme.mainPane.background
-    minimumSize: theme.controls.avatar.size + theme.spacing * 2
+    minimumSize: bottomBar.addAccountButton.width
 
     onHasFocusChanged:
         if (! hasFocus) mainPaneList.detachedCurrentIndex = false
 
 
+
+    property alias filter: bottomBar.roomFilter
+
+    readonly property bool small:
+        width < theme.controls.avatar.size + theme.spacing * 2
+
     readonly property bool hasFocus: bottomBar.filterField.activeFocus
     readonly property alias mainPaneList: mainPaneList
+    readonly property alias topBar: topBar
     readonly property alias bottomBar: bottomBar
-    property alias filter: bottomBar.roomFilter
 
 
     function toggleFocus() {
@@ -46,6 +52,8 @@ HDrawer {
         anchors.fill: parent
 
         TopBar {
+            id: topBar
+
             Layout.fillWidth: true
             Layout.fillHeight: false
             Layout.preferredHeight: theme.baseElementsHeight

src/gui/MainPane/Room.qml

@@ -158,4 +158,20 @@ HTileDelegate {
 
 
     Behavior on opacity { HNumberAnimation {} }
+    Behavior on leftPadding { HNumberAnimation {} }
+
+    Binding on leftPadding {
+        value: (mainPane.minimumSize - loadedImage.width) / 2
+        when: mainPane.small
+    }
+
+    Binding on topPadding {
+        value: leftPadding / 2
+        when: mainPane.small
+    }
+
+    Binding on bottomPadding {
+        value: leftPadding / 2
+        when: mainPane.small
+    }
 }

src/gui/MainPane/TopBar.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts 1.12
 import "../Base"
 
 Rectangle {
+    clip: true
     color: theme.mainPane.topBar.background
 
     HRowLayout {

src/gui/Pages/Chat/RoomPane/MemberDelegate.qml

@@ -42,7 +42,6 @@ HTileDelegate {
     Behavior on spacing { HNumberAnimation {} }
 
     Binding on spacing {
-        id: spacebind
         value: (roomPane.minimumSize - loadedImage.width) / 2
         when: loadedImage &&
               roomPane.width < loadedImage.width + theme.spacing * 2

src/themes/Glass.qpl

@@ -157,6 +157,7 @@ controls:
 
     listView:
         color highlight:          colors.strongBackground
+        color smallPaneHighlight: colors.accentBackground
 
     textField:
         color background:        colors.strongBackground

src/themes/Midnight.qpl

@@ -157,6 +157,7 @@ controls:
 
     listView:
         color highlight:          colors.strongBackground
+        color smallPaneHighlight: colors.accentBackground
 
     textField:
         color background:        colors.strongBackground