From 082772fd08e086482bbba472d93686a3022d7e68 Mon Sep 17 00:00:00 2001
From: aleksandar-mihajlovic
 <120601632+aleksandar-mihajlovic@users.noreply.github.com>
Date: Tue, 17 Jan 2023 22:36:33 +0100
Subject: [PATCH] Fix for contacts tab alignment bugs (#17171)

---
 .../edit-contact/edit-contact.component.js               | 7 ++++++-
 ui/pages/settings/contact-list-tab/index.scss            | 9 +++++++--
 .../view-contact/view-contact.component.js               | 6 +++---
 ui/pages/settings/index.scss                             | 5 +++++
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
index 4e079f5fd..2cfb6142a 100644
--- a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
+++ b/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>
     );
diff --git a/ui/pages/settings/contact-list-tab/index.scss b/ui/pages/settings/contact-list-tab/index.scss
index a693a6540..dcb09e866 100644
--- a/ui/pages/settings/contact-list-tab/index.scss
+++ b/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 {
diff --git a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
index 214726c76..38db938ef 100644
--- a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js
+++ b/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
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index b0af004aa..f84d80e81 100644
--- a/ui/pages/settings/index.scss
+++ b/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 {