Improve update alert on mobile devices.

client/src/components/update-alert/update-alert.component.jsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Space } from "antd";
+import { Alert, Button, Col, Row, Space } from "antd";
 import i18n from "i18next";
 import React from "react";
 import { connect } from "react-redux";
@@ -28,37 +28,43 @@ export function UpdateAlert({ updateAvailable }) {
       message={t("general.messages.newversiontitle")}
       showIcon
       icon={<AlertOutlined />}
-      description={t("general.messages.newversionmessage")}
+      description={
+        <Row gutter={[16, 16]}>
+          <Col sm={24} md={16} lg={18}>
+            {t("general.messages.newversionmessage")}
+          </Col>
+          <Col sm={24} md={8} lg={6}>
+            <Space wrap>
+              <Button
+                onClick={async () => {
+                  window.open("https://imex-online.noticeable.news/", "_blank");
+                }}
+              >
+                {i18n.t("general.actions.viewreleasenotes")}
+              </Button>
+              <Button
+                type="primary"
+                onClick={async () => {
+                  if (globalRegistration && globalRegistration.waiting) {
+                    await globalRegistration.unregister();
+                    // Makes Workbox call skipWaiting()
+                    globalRegistration.waiting.postMessage({
+                      type: "SKIP_WAITING",
+                    });
+                    // Once the service worker is unregistered, we can reload the page to let
+                    // the browser download a fresh copy of our app (invalidating the cache)
+                    window.location.reload();
+                  }
+                }}
+              >
+                {i18n.t("general.actions.refresh")}
+              </Button>
+            </Space>
+          </Col>
+        </Row>
+      }
       closable={false}
       type="warning"
-      action={
-        <Space flex>
-          <Button
-            onClick={async () => {
-              window.open("https://imex-online.noticeable.news/", "_blank");
-            }}
-          >
-            {i18n.t("general.actions.viewreleasenotes")}
-          </Button>
-          <Button
-            type="primary"
-            onClick={async () => {
-              if (globalRegistration && globalRegistration.waiting) {
-                await globalRegistration.unregister();
-                // Makes Workbox call skipWaiting()
-                globalRegistration.waiting.postMessage({
-                  type: "SKIP_WAITING",
-                });
-                // Once the service worker is unregistered, we can reload the page to let
-                // the browser download a fresh copy of our app (invalidating the cache)
-                window.location.reload();
-              }
-            }}
-          >
-            {i18n.t("general.actions.refresh")}
-          </Button>
-        </Space>
-      }
     />
   );
 }