From 02b27086da4db4f386b69ae1aae9f3b9a4ffbece Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 13 Jul 2020 14:52:50 +0200
Subject: [PATCH] swap search field and breadcrumbs

---
 res/css/structures/_LeftPanel2.scss      | 43 +++++++++++-------------
 src/components/structures/LeftPanel2.tsx | 21 ++++++------
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss
index 2724be4e3d..96ac5831dc 100644
--- a/res/css/structures/_LeftPanel2.scss
+++ b/res/css/structures/_LeftPanel2.scss
@@ -64,33 +64,30 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
             // Create another flexbox column for the rows to stack within
             display: flex;
             flex-direction: column;
+        }
 
-            // This is basically just breadcrumbs. The row above that is handled by the UserMenu
-            .mx_LeftPanel2_headerRow {
-                // Create yet another flexbox, this time within the row, to ensure items stay
-                // aligned correctly. This is also a row-based flexbox.
-                display: flex;
-                align-items: center;
+        .mx_LeftPanel2_breadcrumbsContainer {
+            width: 100%;
+            overflow-y: hidden;
+            overflow-x: scroll;
+            margin-top: 20px;
+            padding-bottom: 2px;
+            flex: 0 0 auto;
+            // Create yet another flexbox, this time within the row, to ensure items stay
+            // aligned correctly. This is also a row-based flexbox.
+            display: flex;
+            align-items: center;
+
+            &.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 10%);
             }
 
-            .mx_LeftPanel2_breadcrumbsContainer {
-                width: 100%;
-                overflow-y: hidden;
-                overflow-x: scroll;
-                margin-top: 20px;
-                padding-bottom: 2px;
+            &.mx_IndicatorScrollbar_rightOverflow {
+                mask-image: linear-gradient(90deg, black, black 90%, transparent);
+            }
 
-                &.mx_IndicatorScrollbar_leftOverflow {
-                    mask-image: linear-gradient(90deg, transparent, black 10%);
-                }
-
-                &.mx_IndicatorScrollbar_rightOverflow {
-                    mask-image: linear-gradient(90deg, black, black 90%, transparent);
-                }
-
-                &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
-                    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
-                }
+            &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
             }
         }
 
diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx
index f1f1ffd01f..1f681c54c4 100644
--- a/src/components/structures/LeftPanel2.tsx
+++ b/src/components/structures/LeftPanel2.tsx
@@ -314,24 +314,24 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
     };
 
     private renderHeader(): React.ReactNode {
-        let breadcrumbs;
+        return (
+            <div className="mx_LeftPanel2_userHeader">
+                <UserMenu isMinimized={this.props.isMinimized} />
+            </div>
+        );
+    }
+
+    private renderBreadcrumbs(): React.ReactNode {
         if (this.state.showBreadcrumbs && !this.props.isMinimized) {
-            breadcrumbs = (
+            return (
                 <IndicatorScrollbar
-                    className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer mx_AutoHideScrollbar"
+                    className="mx_LeftPanel2_breadcrumbsContainer mx_AutoHideScrollbar"
                     verticalScrollsHorizontally={true}
                 >
                     <RoomBreadcrumbs2 />
                 </IndicatorScrollbar>
             );
         }
-
-        return (
-            <div className="mx_LeftPanel2_userHeader">
-                <UserMenu isMinimized={this.props.isMinimized} />
-                {breadcrumbs}
-            </div>
-        );
     }
 
     private renderSearchExplore(): React.ReactNode {
@@ -393,6 +393,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 <aside className="mx_LeftPanel2_roomListContainer">
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
+                    {this.renderBreadcrumbs()}
                     <div className="mx_LeftPanel2_roomListWrapper">
                         <div
                             className={roomListClasses}