From 64c70b2de09ca3cb3c7124f44a1c94f812243418 Mon Sep 17 00:00:00 2001
From: Zoe <foldleft@users.noreply.github.com>
Date: Wed, 29 Apr 2020 15:10:23 +0100
Subject: [PATCH] fragments and i18n don't play nice together

---
 .../keybackup/_RestoreKeyBackupDialog.scss    |  2 +-
 .../keybackup/RestoreKeyBackupDialog.js       | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
index d74224c94d..5689d84bc5 100644
--- a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
@@ -32,7 +32,7 @@ limitations under the License.
     padding: 10px;
 }
 
-.mx_RestoreKeyBackupDialog_content {
+.mx_RestoreKeyBackupDialog_content > div {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
index 9829f7af8e..f1008dfcb0 100644
--- a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
@@ -293,10 +293,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             } else if (this.state.progress.stage === "prefetch") {
                 details = _t("Fetching keys from server...");
             }
-            content = <>
+            content = <div>
                 <div>{details}</div>
                 <Spinner />
-            </>;
+            </div>;
         } else if (this.state.loadError) {
             title = _t("Error");
             content = _t("Unable to load backup status");
@@ -304,20 +304,20 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             if (this.state.restoreError.errcode === MatrixClient.RESTORE_BACKUP_ERROR_BAD_KEY) {
                 if (this.state.restoreType === RESTORE_TYPE_RECOVERYKEY) {
                     title = _t("Recovery key mismatch");
-                    content = <>
+                    content = <div>
                         <p>{_t(
                             "Backup could not be decrypted with this recovery key: " +
                             "please verify that you entered the correct recovery key.",
                         )}</p>
-                    </>;
+                    </div>;
                 } else {
                     title = _t("Incorrect recovery passphrase");
-                    content = <>
+                    content = <div>
                         <p>{_t(
                             "Backup could not be decrypted with this recovery passphrase: " +
                             "please verify that you entered the correct recovery passphrase.",
                         )}</p>
-                    </>;
+                    </div>;
                 }
             } else {
                 title = _t("Error");
@@ -336,7 +336,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     {failedCount: this.state.recoverInfo.total - this.state.recoverInfo.imported},
                 )}</p>;
             }
-            content = <>
+            content = <div>
                 <p>{_t("Successfully restored %(sessionCount)s keys", {sessionCount: this.state.recoverInfo.imported})}</p>
                 {failedToDecrypt}
                 <DialogButtons primaryButton={_t('OK')}
@@ -344,12 +344,12 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     hasCancel={false}
                     focus={true}
                 />
-            </>;
+            </div>;
         } else if (backupHasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             title = _t("Enter recovery passphrase");
-            content = <>
+            content = <div>
                 <p>{_t(
                     "<b>Warning</b>: you should only set up key backup " +
                     "from a trusted computer.", {},
@@ -394,7 +394,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                         {s}
                     </AccessibleButton>,
                 })}
-            </>;
+            </div>;
         } else {
             title = _t("Enter recovery key");
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -413,7 +413,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 </div>;
             }
 
-            content = <>
+            content = <div>
                 <p>{_t(
                     "<b>Warning</b>: You should only set up key backup " +
                     "from a trusted computer.", {},
@@ -450,7 +450,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                         {s}
                     </AccessibleButton>,
                 })}
-            </>;
+            </div>;
         }
 
         return (