Animate status bar max-height and margin-top

When collapsed, the max-height is set to 0px. When expanded, max-height is set to 50px, margin-top is set to 0px. When expanded and when the timeline is not scrolled down to the bottom, margin-top is set to -50px to offset the change in height, keeping it at the same scroll position.

Without the animation, there would be a jump when the user starts scrolling up from the bottom whilst the StatusBar is expanded.

src/skins/vector/css/matrix-react-sdk/structures/RoomView.css

@@ -202,6 +202,25 @@ hr.mx_RoomView_myReadMarker {
     width: 100%;
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: #fff;
+    z-index: 1000;
+    overflow: hidden;
+
+    -webkit-transition: all .5s ease-in-out;
+    -moz-transition: all .5s ease-in-out;
+    -ms-transition: all .5s ease-in-out;
+    -o-transition: all .5s ease-in-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 50px;
+    margin-top: 0px;
+}
+
+.mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline {
+    margin-top: -50px;
 }
 
 .mx_RoomView_statusAreaBox {