Adjust recovery key button sizes depending on text width (#7134)

matrix-org · Nov 17, 2021 · f27eb04 · f27eb04
1 parent 1cb0e92
commit f27eb04
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git 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; */
     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
@@ -714,12 +714,13 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                 <InlineSpinner />
             </div>;
         }
+
         return <div>
             <p>{ _t(
                 "Store your Security Key somewhere safe, like a password manager or a safe, " +
                 "as it's used to safeguard your encrypted data.",
             ) }</p>
-            <div className="mx_CreateSecretStorageDialog_primaryContainer">
+            <div className="mx_CreateSecretStorageDialog_primaryContainer mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer">
                 <div className="mx_CreateSecretStorageDialog_recoveryKeyContainer">
                     <div className="mx_CreateSecretStorageDialog_recoveryKey">
                         <code ref={this.recoveryKeyNode}>{ this.recoveryKey.encodedPrivateKey }</code>
@@ -739,7 +740,20 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                             onClick={this.onCopyClick}
                             disabled={this.state.phase === Phase.Storing}
                         >
-                            { this.state.copied ? _t("Copied!") : _t("Copy") }
+                            <span
+                                className="mx_CreateSecretStorageDialog_recoveryKeyCopyButtonText"
+                                style={{ height: this.state.copied ? '0' : 'auto' }}
+                                aria-hidden={this.state.copied}
+                            >
+                                { _t("Copy") }
+                            </span>
+                            <span
+                                className="mx_CreateSecretStorageDialog_recoveryKeyCopyButtonText"
+                                style={{ height: this.state.copied ? 'auto' : '0' }}
+                                aria-hidden={!this.state.copied}
+                            >
+                                { _t("Copied!") }
+                            </span>
                         </AccessibleButton>
                     </div>
                 </div>