diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
index b14206ff6da..04aa3cbee1a 100644
--- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
+++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
@@ -74,6 +74,11 @@ limitations under the License.
.mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding-top: 20px;
+
+ &.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer {
+ display: flex;
+ justify-content: center;
+ }
}
.mx_CreateSecretStorageDialog_primaryContainer::after {
@@ -127,9 +132,7 @@ limitations under the License.
}
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
- width: 380px;
- margin-left: auto;
- margin-right: auto;
+ display: inline-block;
}
.mx_CreateSecretStorageDialog_recoveryKey {
@@ -141,18 +144,29 @@ limitations under the License.
border-radius: 6px;
word-spacing: 1em;
margin-bottom: 20px;
+
+ code {
+ display: inline-block;
+ width: 30rem;
+ }
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
- display: flex;
- justify-content: space-between;
align-items: center;
+ display: flex;
+ gap: 16px;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn {
+ flex-direction: column;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyCopyButtonText {
+ overflow-y: hidden;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
- width: 160px;
- padding-left: 0px;
- padding-right: 0px;
+ flex-grow: 1;
white-space: nowrap;
}
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
index 145d3bcede5..7bdd7df0877 100644
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@@ -714,12 +714,13 @@ export default class CreateSecretStorageDialog extends React.PureComponent
{ _t( "Store your Security Key somewhere safe, like a password manager or a safe, " + "as it’s used to safeguard your encrypted data.", ) }
-{ this.recoveryKey.encodedPrivateKey }
@@ -739,7 +740,20 @@ export default class CreateSecretStorageDialog extends React.PureComponent