From 13d6456200affa9c3b79ccc3b9b43628aa25635a Mon Sep 17 00:00:00 2001
From: Andy Balaam <andyb@element.io>
Date: Fri, 15 Oct 2021 17:19:22 +0100
Subject: [PATCH 1/2] Convert CryptographyPanel to a table

---
 .../views/settings/_CryptographyPanel.scss    | 20 ++++++++++---------
 .../views/settings/CryptographyPanel.tsx      | 20 +++++++++----------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/res/css/views/settings/_CryptographyPanel.scss b/res/css/views/settings/_CryptographyPanel.scss
index 2290791d5d..432dfa22e0 100644
--- a/res/css/views/settings/_CryptographyPanel.scss
+++ b/res/css/views/settings/_CryptographyPanel.scss
@@ -1,16 +1,18 @@
 .mx_CryptographyPanel_sessionInfo {
-    display: table;
-    padding-left: 0;
+    padding: 0em;
+    border-spacing: 0px;
+}
+.mx_CryptographyPanel_sessionInfo > tr {
+    vertical-align: baseline;
+    padding: 0em;
 }
 
-.mx_CryptographyPanel_sessionInfo > li {
-    display: table-row;
-}
-
-.mx_CryptographyPanel_sessionInfo > li > label,
-.mx_CryptographyPanel_sessionInfo > li > span {
-    display: table-cell;
+.mx_CryptographyPanel_sessionInfo > tr > td,
+.mx_CryptographyPanel_sessionInfo > tr > td {
+    padding-bottom: 0em;
+    padding-left: 0em;
     padding-right: 1em;
+    padding-top: 0em;
 }
 
 .mx_CryptographyPanel_importExportButtons .mx_AccessibleButton {
diff --git a/src/components/views/settings/CryptographyPanel.tsx b/src/components/views/settings/CryptographyPanel.tsx
index 1e1cb3ba68..67a3e8aa75 100644
--- a/src/components/views/settings/CryptographyPanel.tsx
+++ b/src/components/views/settings/CryptographyPanel.tsx
@@ -74,16 +74,16 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
         return (
             <div className='mx_SettingsTab_section mx_CryptographyPanel'>
                 <span className='mx_SettingsTab_subheading'>{ _t("Cryptography") }</span>
-                <ul className='mx_SettingsTab_subsectionText mx_CryptographyPanel_sessionInfo'>
-                    <li>
-                        <label>{ _t("Session ID:") }</label>
-                        <span><code>{ deviceId }</code></span>
-                    </li>
-                    <li>
-                        <label>{ _t("Session key:") }</label>
-                        <span><code><b>{ identityKey }</b></code></span>
-                    </li>
-                </ul>
+                <table className='mx_SettingsTab_subsectionText mx_CryptographyPanel_sessionInfo'>
+                    <tr>
+                        <td>{ _t("Session ID:") }</td>
+                        <td><code>{ deviceId }</code></td>
+                    </tr>
+                    <tr>
+                        <td>{ _t("Session key:") }</td>
+                        <td><code><b>{ identityKey }</b></code></td>
+                    </tr>
+                </table>
                 { importExportButtons }
                 { noSendUnverifiedSetting }
             </div>

From 61a5b495b7fc1360d5f41a3691f8182c276547d8 Mon Sep 17 00:00:00 2001
From: Andy Balaam <andyb@element.io>
Date: Mon, 18 Oct 2021 12:23:09 +0100
Subject: [PATCH 2/2] Remove duplicate CSS selector

---
 res/css/views/settings/_CryptographyPanel.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/settings/_CryptographyPanel.scss b/res/css/views/settings/_CryptographyPanel.scss
index 432dfa22e0..095218addf 100644
--- a/res/css/views/settings/_CryptographyPanel.scss
+++ b/res/css/views/settings/_CryptographyPanel.scss
@@ -7,7 +7,6 @@
     padding: 0em;
 }
 
-.mx_CryptographyPanel_sessionInfo > tr > td,
 .mx_CryptographyPanel_sessionInfo > tr > td {
     padding-bottom: 0em;
     padding-left: 0em;