From 51fe530285d8ab07ee1f05989e08d096d69f12b2 Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Date: Sat, 3 Oct 2020 18:47:27 -0400
Subject: [PATCH] Fix email confirmation alert

Currently, the controls are on a new line due to the container div. We want to wrap ALL children of the alert, including the controls, in the container div.

We need to split it into a separate class so that we can add modify the alert vnode AFTER the alert component's `view` logic has been applied.
---
 .../js/src/forum/utils/alertEmailConfirmation.js  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/framework/core/js/src/forum/utils/alertEmailConfirmation.js b/framework/core/js/src/forum/utils/alertEmailConfirmation.js
index 9f158271c..db5047e00 100644
--- a/framework/core/js/src/forum/utils/alertEmailConfirmation.js
+++ b/framework/core/js/src/forum/utils/alertEmailConfirmation.js
@@ -52,13 +52,18 @@ export default function alertEmailConfirmation(app) {
     }
   }
 
+  class ContainedAlert extends Alert {
+    view(vnode) {
+      const vdom = super.view(vnode);
+      return { ...vdom, children: [<div className="container">{vdom.children}</div>] };
+    }
+  }
+
   m.mount($('<div/>').insertBefore('#content')[0], {
     view: () => (
-      <Alert dismissible={false} controls={[<ResendButton />]}>
-        <div className="container">
-          {app.translator.trans('core.forum.user_email_confirmation.alert_message', { email: <strong>{user.email()}</strong> })}
-        </div>
-      </Alert>
+      <ContainedAlert dismissible={false} controls={[<ResendButton />]}>
+        {app.translator.trans('core.forum.user_email_confirmation.alert_message', { email: <strong>{user.email()}</strong> })}
+      </ContainedAlert>
     ),
   });
 }