Merge pull request #6968 from andybalaam/cryptographypanel-table

Convert CryptographyPanel to a table

Author: andybalaam

res/css/views/settings/_CryptographyPanel.scss

@@ -1,16 +1,17 @@
 .mx_CryptographyPanel_sessionInfo {
-    display: table;
-    padding-left: 0;
+    padding: 0em;
+    border-spacing: 0px;
 }
-
-.mx_CryptographyPanel_sessionInfo > li {
-    display: table-row;
+.mx_CryptographyPanel_sessionInfo > tr {
+    vertical-align: baseline;
+    padding: 0em;
 }
 
-.mx_CryptographyPanel_sessionInfo > li > label,
-.mx_CryptographyPanel_sessionInfo > li > span {
-    display: table-cell;
+.mx_CryptographyPanel_sessionInfo > tr > td {
+    padding-bottom: 0em;
+    padding-left: 0em;
     padding-right: 1em;
+    padding-top: 0em;
 }
 
 .mx_CryptographyPanel_importExportButtons .mx_AccessibleButton {

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>