fix contact settings layout issues (#11967)

ui/pages/send/send.scss

@@ -136,6 +136,10 @@
       &__title {
         @include H6;
 
+        max-width: 20em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
         color: $black;
       }
 

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import ContactList from '../../../components/app/contact-list';
 import {
   CONTACT_ADD_ROUTE,
@@ -68,12 +69,16 @@ export default class ContactListTab extends Component {
   }
 
   renderAddButton() {
-    const { history } = this.props;
+    const { history, viewingContact, editingContact } = this.props;
 
     return (
       <div className="address-book-add-button">
         <Button
-          className="address-book-add-button__button"
+          className={classnames({
+            'address-book-add-button__button': true,
+            'address-book-add-button__button--hidden':
+              viewingContact || editingContact,
+          })}
           type="secondary"
           rounded
           onClick={() => {

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

@@ -39,6 +39,10 @@
       @include H3;
 
       margin-left: 24px;
+      max-width: 8em;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
     }
   }
 
@@ -258,6 +262,10 @@
     @media screen and (max-width: 576px) {
       top: 16px;
       right: 60px;
+
+      &--hidden {
+        display: none;
+      }
     }
   }
 }

ui/pages/settings/index.scss

@@ -21,6 +21,13 @@
       @include H3;
 
       flex: 1 0 auto;
+
+      @media screen and (max-width: 575px) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: 250px;
+      }
     }
   }