From 40cd976e8c7e6347b9cc4c588406092939ccd5cc Mon Sep 17 00:00:00 2001
From: Erik Marks <25517051+rekmarks@users.noreply.github.com>
Date: Mon, 27 Apr 2020 08:36:08 -0700
Subject: [PATCH] Fix connected sites modal styling; add shortenUrl function
 (#8409)

* fix content row styling

* fix border styling

* handle long domain names
---
 .../components/app/connected-sites-list/index.scss   |  5 +++--
 ui/app/components/ui/popover/index.scss              |  2 +-
 ui/app/helpers/utils/util.js                         | 12 +++++++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/app/components/app/connected-sites-list/index.scss b/ui/app/components/app/connected-sites-list/index.scss
index a06a361e5..f2045db37 100644
--- a/ui/app/components/app/connected-sites-list/index.scss
+++ b/ui/app/components/app/connected-sites-list/index.scss
@@ -3,7 +3,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    border-top: 1px solid #D2D8DD;
   }
 
   &__content-row {
@@ -12,7 +11,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid #D2D8DD;
+    border-top: 1px solid #D2D8DD;
     padding: 16px 24px;
   }
 
@@ -25,8 +24,10 @@
   }
 
   &__domain-name {
+    max-width: 215px;
     white-space: nowrap;
     overflow: hidden;
+    direction: rtl;
     text-overflow: ellipsis;
     margin-left: 6px;
   }
diff --git a/ui/app/components/ui/popover/index.scss b/ui/app/components/ui/popover/index.scss
index 6b880a25c..4eb70d08f 100644
--- a/ui/app/components/ui/popover/index.scss
+++ b/ui/app/components/ui/popover/index.scss
@@ -77,7 +77,7 @@
   }
 
   &-content {
-    overflow-y: scroll;
+    overflow-y: auto;
     position: relative;
     display: flex;
     flex: 1;
diff --git a/ui/app/helpers/utils/util.js b/ui/app/helpers/utils/util.js
index 25e00fbd7..97adc67f2 100644
--- a/ui/app/helpers/utils/util.js
+++ b/ui/app/helpers/utils/util.js
@@ -132,7 +132,6 @@ export function formatBalance (balance, decimalsToKeep, needsParse = true, ticke
   return formatted
 }
 
-
 export function generateBalanceObject (formattedBalance, decimalsToKeep = 1) {
   let balance = formattedBalance.split(' ')[0]
   const label = formattedBalance.split(' ')[1]
@@ -267,6 +266,17 @@ export function checksumAddress (address) {
   return checksummed
 }
 
+/**
+ * Shortens an Ethereum address for display, preserving the beginning and end.
+ * Returns the given address if it is no longer than 10 characters.
+ * Shortened addresses are 13 characters long.
+ *
+ * Example output: 0xabcd...1234
+ *
+ * @param {string} address - The address to shorten.
+ * @returns {string} The shortened address, or the original if it was no longer
+ * than 10 characters.
+ */
 export function shortenAddress (address = '') {
   if (address.length < 11) {
     return address