rename .TimelinePanel to .RoomView_body

src/platform/web/ui/css/layout.css

@@ -122,8 +122,8 @@ main {
     height: 100%;
 }
 
-.TimelinePanel {
-    flex: 3;
+.RoomView_body {
+    flex: 1;
     min-height: 0;
     min-width: 0;
     display: flex;
@@ -131,7 +131,7 @@ main {
     height: 100%;
 }
 
-.TimelinePanel .Timeline, .TimelinePanel .TimelineLoadingView {
+.RoomView_body .Timeline, .RoomView_body .TimelineLoadingView {
     flex: 1 0 0;
 }
 

src/platform/web/ui/css/timeline.css

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 
-.TimelinePanel ul {
+.RoomView_body ul {
     overflow-y: auto;
     overscroll-behavior: contain;
     list-style: none;
@@ -23,9 +23,6 @@ limitations under the License.
     margin: 0;
 }
 
-.TimelinePanel li {
-}
-
 .message-container {
     flex: 0 1 auto;
     /* first try break-all, then break-word, which isn't supported everywhere */

src/platform/web/ui/session/room/RoomView.js

@@ -24,14 +24,14 @@ import {AvatarView} from "../../avatar.js";
 export class RoomView extends TemplateView {
     render(t, vm) {
         return t.main({className: "RoomView middle"}, [
-            t.div({className: "TimelinePanel"}, [
             t.div({className: "RoomHeader middle-header"}, [
                 t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close room`}),
                 t.view(new AvatarView(vm, 32)),
                 t.div({className: "room-description"}, [
-                        t.h2(vm => vm.name),
+                    t.h2([vm => vm.name, vm => vm.membership]),
                 ]),
             ]),
+            t.div({className: "RoomView_body"}, [
                 t.div({className: "RoomView_error"}, vm => vm.error),
                 t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
                     return timelineViewModel ?