From cf92fc37d42c10616835124543790aad1ff9b84d Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 22 Jun 2020 12:51:53 -0600
Subject: [PATCH] Fix layout of minimized view for new room list

---
 res/css/views/rooms/_RoomSublist2.scss      |  8 ++++----
 src/components/views/rooms/RoomSublist2.tsx | 19 +++++++++++++++----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index 66615fb6a8..24151b15b0 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -304,18 +304,18 @@ limitations under the License.
             position: relative;
 
             .mx_RoomSublist2_badgeContainer {
-                order: 1;
+                order: 0;
                 align-self: flex-end;
                 margin-right: 0;
             }
 
-            .mx_RoomSublist2_headerText {
-                order: 2;
+            .mx_RoomSublist2_stickable {
+                order: 1;
                 max-width: 100%;
             }
 
             .mx_RoomSublist2_auxButton {
-                order: 4;
+                order: 2;
                 visibility: visible;
                 width: 32px !important; // !important to override hover styles
                 height: 32px !important; // !important to override hover styles
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 08a41570e3..4a145ede11 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -291,7 +291,18 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         'mx_RoomSublist2_headerContainer_withAux': !!addRoomButton,
                     });
 
+                    const badgeContainer = (
+                        <div className="mx_RoomSublist2_badgeContainer">
+                            {badge}
+                        </div>
+                    );
+
                     // TODO: a11y (see old component)
+                    // Note: the addRoomButton conditionally gets moved around
+                    // the DOM depending on whether or not the list is minimized.
+                    // If we're minimized, we want it below the header so it
+                    // doesn't become sticky.
+                    // The same applies to the notification badge.
                     return (
                         <div className={classes}>
                             <div className='mx_RoomSublist2_stickable'>
@@ -307,11 +318,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                                     <span>{this.props.label}</span>
                                 </AccessibleButton>
                                 {this.renderMenu()}
-                                {addRoomButton}
-                                <div className="mx_RoomSublist2_badgeContainer">
-                                    {badge}
-                                </div>
+                                {this.props.isMinimized ? null : addRoomButton}
+                                {this.props.isMinimized ? null : badgeContainer}
                             </div>
+                            {this.props.isMinimized ? badgeContainer : null}
+                            {this.props.isMinimized ? addRoomButton : null}
                         </div>
                     );
                 }}