From 5efd92f3ecae8049559bdb94624faf74ca2346f9 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 11:26:46 +0100
Subject: [PATCH] make rooms come in from left rather than the right

---
 res/css/views/rooms/_RoomBreadcrumbs.scss     | 19 +++++++------------
 src/components/views/rooms/RoomBreadcrumbs.js |  6 +++---
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
index 41149fc0b2..3cfec40cc4 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -21,17 +21,12 @@ limitations under the License.
     margin: 8px;
     margin-bottom: 0;
 
-    > div {
-        display: flex;
-        flex-direction: row;
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 32px;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: row;
 
-        > * {
-            margin-right: 4px;
-        }
+    > * {
+        margin-right: 4px;
     }
 
     &::after {
@@ -39,9 +34,9 @@ limitations under the License.
         position: absolute;
         width: 15px;
         top: 0;
-        left: 0;
+        right: 0;
         height: 100%;
-        background: linear-gradient(to left, rgba(242,245,248,0), rgba(242,245,248,1));
+        background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1));
     }
 }
 
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 7405f9efed..304a92934a 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -60,9 +60,9 @@ export default class RoomBreadcrumbs extends React.Component {
         if (existingIdx !== -1) {
             rooms.splice(existingIdx, 1);
         }
-        rooms.push(room);
+        rooms.splice(0, 0, room);
         if (rooms.length > MAX_ROOMS) {
-            rooms.splice(0, rooms.length - MAX_ROOMS);
+            rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS);
         }
         this.setState({rooms});
     }
@@ -79,6 +79,6 @@ export default class RoomBreadcrumbs extends React.Component {
                 </AccessibleButton>
             );
         });
-        return (<div className="mx_RoomBreadcrumbs"><div>{ avatars }</div></div>);
+        return (<div className="mx_RoomBreadcrumbs">{ avatars }</div>);
     }
 }