Center UnknownRoomView content vertically

element-hq · Jan 9, 2023 · dcd514a · dcd514a
1 parent 023b365
commit dcd514a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -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))
+                ])
             ])
         ]);
     }