Fix connected sites modal styling; add shortenUrl function (#8409)

* fix content row styling

* fix border styling

* handle long domain names

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;
   }

ui/app/components/ui/popover/index.scss

@@ -77,7 +77,7 @@
   }
 
   &-content {
-    overflow-y: scroll;
+    overflow-y: auto;
     position: relative;
     display: flex;
     flex: 1;

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