refine unknown room view

src/domain/session/room/UnknownRoomViewModel.js

@@ -22,7 +22,7 @@ export class UnknownRoomViewModel extends ViewModel {
         super(options);
         const {roomIdOrAlias, session} = options;
         this._session = session;
-        this._roomIdOrAlias = roomIdOrAlias;
+        this.roomIdOrAlias = roomIdOrAlias;
         this._error = null;
         this._busy = false;
     }
@@ -31,15 +31,11 @@ export class UnknownRoomViewModel extends ViewModel {
         return this._error?.message;
     }
 
-    get description() {
-        return this.i18n`You are currently not in ${this._roomIdOrAlias}. Want to join it?`;
-    }
-
     async join() {
         this._busy = true;
         this.emitChange("busy");
         try {
-            const roomId = await this._session.joinRoom(this._roomIdOrAlias);
+            const roomId = await this._session.joinRoom(this.roomIdOrAlias);
             // navigate to roomId if we were at the alias
             this.navigation.push("room", roomId);
         } catch (err) {

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

@@ -910,4 +910,22 @@ button.link {
 
 .RoomArchivedView h3 {
     margin: 0;
+}
+
+.UnknownRoomView {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 16px;
+    box-sizing: border-box;
+}
+
+.UnknownRoomView h2 {
+    word-break: break-all;
+    word-break: break-word;
+}
+
+.UnknownRoomView button {
+    max-width: 200px;
+    width: 100%;
 }

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

@@ -26,13 +26,18 @@ import {AvatarView} from "../../avatar.js";
 
 export class UnknownRoomView extends TemplateView {
     render(t, vm) {
-        return t.main({className: "UnknownRoomView middle"}, [
-            t.h2(vm.description),
-            t.div(t.button({
+        return t.main({className: "UnknownRoomView middle"}, t.div([
+            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`))
-        ]);
+            }, vm.i18n`Join room`),
+            t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
+        ]));
     }
 }