Implement invite button in memberlist

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

@@ -217,6 +217,8 @@ the layout viewport up without resizing it when the keyboard shows */
 
 .LazyListParent {
     flex: 1;
+    flex-basis: 0;
+    margin-top: 15px;
 }
 
 .LoadingView {

src/platform/web/ui/css/themes/element/theme.css

@@ -1123,12 +1123,32 @@ button.RoomDetailsView_row::after {
 
 /* Memberlist Panel */
 
-.MemberListView {
+.MemberListView__list {
     padding-left: 16px;
     padding-right: 16px;
     margin: 0;
 }
 
+.MemberListView {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.MemberListView__invite-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.MemberListView__invite-btn {
+    width: 80%;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .MemberTileView {
     margin-bottom: 8px;
     list-style: none;

src/platform/web/ui/session/rightpanel/MemberListView.js

@@ -16,13 +16,20 @@ limitations under the License.
 
 import {LazyListView} from "../../general/LazyListView";
 import {MemberTileView} from "./MemberTileView.js";
+import {TemplateView} from "../../general/TemplateView";
 
-export class MemberListView extends LazyListView {
-    constructor(vm) {
-        super({
+export class MemberListView extends TemplateView {
+    render(t, vm) {
+        const list = new LazyListView({
             list: vm.memberTileViewModels,
-            className: "MemberListView",
+            className: "MemberListView__list",
             itemHeight: 40
         }, tileViewModel => new MemberTileView(tileViewModel));
+        return t.div({ className: "MemberListView" }, [
+            t.div({ className: "MemberListView__invite-container" }, [
+                t.button({ className: "MemberListView__invite-btn button-action primary" }, vm.i18n`Invite to this room`),
+            ]),
+            t.view(list),
+        ]);
     }
 }