Merge pull request #3025 from near/ONB-40

Minor UI update on handling implicit account character ellipsis
near · Mar 29, 2023 · 6fcae6f · 6fcae6f
2 parents 8e51f41 + 1108ef4
commit 6fcae6f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/frontend/src/components/accounts/recovery_setup/new_account/SavePassphrase.js b/packages/frontend/src/components/accounts/recovery_setup/new_account/SavePassphrase.js
@@ -1,9 +1,16 @@
 import React from 'react';
 import { Translate } from 'react-localize-redux';
+import styled from 'styled-components';
 
 import Container from '../../../common/styled/Container.css';
 import SetupSeedPhraseForm from '../../SetupSeedPhraseForm';
 
+const AccountIdContainer = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 800;
+`;
+
 export default ({
     passPhrase,
     refreshPhrase,
@@ -16,7 +23,7 @@ export default ({
         <Container className='small-centered border' style={style}>
             <h1><Translate id='setupSeedPhrase.pageTitle' /></h1>
             {
-                accountId && (<h2><b>{accountId}</b></h2>)
+                accountId && (<h2><AccountIdContainer>{accountId}</AccountIdContainer></h2>)
             }
             <h2><Translate id='setupSeedPhrase.pageText' /></h2>
             <SetupSeedPhraseForm

diff --git a/packages/frontend/src/components/wallet-migration/modals/CleanKeysModal/AccessKeyList.jsx b/packages/frontend/src/components/wallet-migration/modals/CleanKeysModal/AccessKeyList.jsx
@@ -42,11 +42,12 @@ const AccessKeyListContainer = styled.div`
         width: 100%;
 
         .account-detail {
-            flex: 7;
+            width: 100%;
 
             .account-id {
                 font-weight: bold;
                 text-overflow: ellipsis;
+                overflow: hidden;
             }
 
             .keys-to-remove {