From 1afb09d2574dfced61baa3aeafe7881329b712ea Mon Sep 17 00:00:00 2001
From: Zoe <foldleft@users.noreply.github.com>
Date: Wed, 29 Apr 2020 14:29:36 +0100
Subject: [PATCH] Fixed the dialog height

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

diff --git a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
index 9cba8e0da9..d74224c94d 100644
--- a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
@@ -32,3 +32,9 @@ limitations under the License.
     padding: 10px;
 }
 
+.mx_RestoreKeyBackupDialog_content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 110px; /* Empirically measured */
+}
diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
index da67fb9777..9829f7af8e 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 = <div>
+            content = <>
                 <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 = <div>
+                    content = <>
                         <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 = <div>
+                    content = <>
                         <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 = <div>
+            content = <>
                 <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 = <div>
+            content = <>
                 <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 = <div>
+            content = <>
                 <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 (
@@ -458,7 +458,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={title}
             >
-            <div>
+            <div className='mx_RestoreKeyBackupDialog_content'>
                 {content}
             </div>
             </BaseDialog>