Put backup details in a table

res/css/views/settings/_SecureBackupPanel.scss

@@ -35,3 +35,15 @@ limitations under the License.
 .mx_SecureBackupPanel_buttonRow {
     margin: 1em 0;
 }
+
+.mx_SecureBackupPanel_statusList {
+    border-spacing: 0;
+
+    td {
+        padding: 0;
+
+        &:first-of-type {
+            padding-inline-end: 1em;
+        }
+    }
+}

src/components/views/settings/SecureBackupPanel.js

@@ -174,6 +174,7 @@ export default class SecureBackupPanel extends React.PureComponent {
         } = this.state;
 
         let statusDescription;
+        let extraDetailsTableRows;
         let extraDetails;
         let actions;
         if (error) {
@@ -316,9 +317,18 @@ export default class SecureBackupPanel extends React.PureComponent {
                 </AccessibleButton>;
             }
 
+            extraDetailsTableRows = <>
+                <tr>
+                    <td>{_t("Backup version:")}</td>
+                    <td>{backupInfo.version}</td>
+                </tr>
+                <tr>
+                    <td>{_t("Algorithm:")}</td>
+                    <td>{backupInfo.algorithm}</td>
+                </tr>
+            </>;
+
             extraDetails = <>
-                <div>{_t("Backup version: ")}{backupInfo.version}</div>
-                <div>{_t("Algorithm: ")}{backupInfo.algorithm}</div>
                 {uploadStatus}
                 <div>{backupSigStatuses}</div>
                 <div>{trustedLocally}</div>
@@ -359,9 +369,15 @@ export default class SecureBackupPanel extends React.PureComponent {
                 {statusDescription}
                 <details>
                     <summary>{_t("Advanced")}</summary>
-                    <div>{_t("Backup key stored: ")}{
+                    <table className="mx_SecureBackupPanel_statusList"><tbody>
-                        backupKeyStored === true ? _t("in secret storage") : _t("not stored")
+                        <tr>
-                    }</div>
+                            <td>{_t("Backup key stored:")}</td>
+                            <td>{
+                                backupKeyStored === true ? _t("in secret storage") : _t("not stored")
+                            }</td>
+                        </tr>
+                        {extraDetailsTableRows}
+                    </tbody></table>
                     {extraDetails}
                 </details>
                 {actions}

src/i18n/strings/en_EN.json

@@ -750,13 +750,13 @@
     "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> session <device></device>": "Backup has an <validity>invalid</validity> signature from <verify>unverified</verify> session <device></device>",
     "Backup is not signed by any of your sessions": "Backup is not signed by any of your sessions",
     "This backup is trusted because it has been restored on this session": "This backup is trusted because it has been restored on this session",
-    "Backup version: ": "Backup version: ",
+    "Backup version:": "Backup version:",
-    "Algorithm: ": "Algorithm: ",
+    "Algorithm:": "Algorithm:",
     "Your keys are <b>not being backed up from this session</b>.": "Your keys are <b>not being backed up from this session</b>.",
     "Back up your keys before signing out to avoid losing them.": "Back up your keys before signing out to avoid losing them.",
     "Start using Key Backup": "Start using Key Backup",
     "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Recovery Key.": "Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Recovery Key.",
-    "Backup key stored: ": "Backup key stored: ",
+    "Backup key stored:": "Backup key stored:",
     "not stored": "not stored",
     "Identity Server URL must be HTTPS": "Identity Server URL must be HTTPS",
     "Not a valid Identity Server (status code %(code)s)": "Not a valid Identity Server (status code %(code)s)",