make rooms come in from left rather than the right

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));
     }
 }
 

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>);
     }
 }