Fix for contacts tab alignment bugs (#17171)

ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js

@@ -100,7 +100,7 @@ export default class EditContact extends PureComponent {
               onChange={(e) => this.setState({ newAddress: e.target.value })}
               fullWidth
               multiline
-              rows={3}
+              rows={4}
               margin="dense"
               classes={{
                 inputMultiline:
@@ -169,6 +169,11 @@ export default class EditContact extends PureComponent {
             history.push(`${viewRoute}/${address}`);
           }}
           submitText={this.context.t('save')}
+          disabled={
+            this.state.newName === name &&
+            this.state.newAddress === address &&
+            this.state.newMemo === memo
+          }
         />
       </div>
     );

ui/pages/settings/contact-list-tab/index.scss

@@ -16,6 +16,11 @@
     }
   }
 
+  &__header {
+    display: flex;
+    align-items: center;
+  }
+
   &__header,
   &__header--edit {
     &__name {
@@ -102,7 +107,7 @@
     }
 
     &__address {
-      height: 60px !important;
+      height: 90px !important;
 
       textarea {
         padding-top: 10px !important;
@@ -119,7 +124,7 @@
         @include H7;
 
         color: var(--color-text-alternative);
-        margin-bottom: 0.25rem;
+        margin-top: 0.75rem;
       }
 
       &__label--capitalized {

ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js

@@ -11,10 +11,10 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 
 function quadSplit(address) {
-  return `0x ${address
+  return `0x${address
     .slice(2)
     .match(/.{1,4}/gu)
-    .join(' ')}`;
+    .join('')}`;
 }
 
 function ViewContact({
@@ -38,7 +38,7 @@ function ViewContact({
       <div className="settings-page__content-item">
         <div className="settings-page__header address-book__header">
           <Identicon address={address} diameter={60} />
-          <div className="address-book__header__name">{name}</div>
+          <div className="address-book__header__name">{name || address}</div>
         </div>
         <div className="address-book__view-contact__group">
           <Button

ui/pages/settings/index.scss

@@ -171,6 +171,11 @@
 
   &__subheader--break {
     margin-inline-start: 4px;
+    white-space: nowrap;
+    width: 100%;
+    max-width: calc(100% - 125px - 85px);
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__sub-header {