From dcd514a4845a00c863e68b553815526d6d471a82 Mon Sep 17 00:00:00 2001
From: Paulo Pinto <paulo.pinto@automattic.com>
Date: Mon, 9 Jan 2023 15:55:24 +0000
Subject: [PATCH] Center UnknownRoomView content vertically

---
 .../web/ui/css/themes/element/theme.css       |  9 ++++++-
 .../web/ui/session/room/UnknownRoomView.js    | 24 ++++++++++---------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index d010220a..40b280e2 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -959,9 +959,16 @@ button.link {
     margin: 0;
 }
 
-.UnknownRoomView_body {
+.UnknownRoomView_container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+}
+
+.UnknownRoomView_body {
+    height: 100%;
     text-align: center;
     padding: 16px;
     box-sizing: border-box;
diff --git a/src/platform/web/ui/session/room/UnknownRoomView.js b/src/platform/web/ui/session/room/UnknownRoomView.js
index 715b60c7..4174b4b2 100644
--- a/src/platform/web/ui/session/room/UnknownRoomView.js
+++ b/src/platform/web/ui/session/room/UnknownRoomView.js
@@ -24,17 +24,19 @@ export class UnknownRoomView extends TemplateView {
                 t.h2("Join room"),
             ]),
             t.div({className: "UnknownRoomView_body centered-column"}, [
-                t.h2([
-                    vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
-                    t.br(),
-                    vm.i18n`Want to join it?`
-                ]),
-                t.button({
-                    className: "button-action primary",
-                    onClick: () => vm.join(),
-                    disabled: vm => vm.busy,
-                }, vm.i18n`Join room`),
-                t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
+                t.div({className: "UnknownRoomView_container"}, [
+                    t.h2([
+                        vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
+                        t.br(),
+                        vm.i18n`Want to join it?`
+                    ]),
+                    t.button({
+                        className: "button-action primary",
+                        onClick: () => vm.join(),
+                        disabled: vm => vm.busy,
+                    }, vm.i18n`Join room`),
+                    t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
+                ])
             ])
         ]);
     }