From a6fd1266aa8e8b3d570856efc4fa7d38d35bdc06 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 19 Oct 2020 15:38:01 -0500
Subject: [PATCH] Fix 9638 - Prevent excessive overflow from swap dropdowns

---
 ui/app/pages/swaps/build-quote/build-quote.js | 33 ++++++++++---------
 ui/app/pages/swaps/build-quote/index.scss     |  5 +++
 .../swaps/dropdown-search-list/index.scss     |  2 ++
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/ui/app/pages/swaps/build-quote/build-quote.js b/ui/app/pages/swaps/build-quote/build-quote.js
index 8ca56c3af..31131ff83 100644
--- a/ui/app/pages/swaps/build-quote/build-quote.js
+++ b/ui/app/pages/swaps/build-quote/build-quote.js
@@ -241,22 +241,23 @@ export default function BuildQuote ({
         <div className="build-quote__dropdown-swap-to-header">
           <div className="build-quote__input-label">{t('swapSwapTo')}</div>
         </div>
-        <DropdownSearchList
-          startingItem={selectedToToken}
-          itemsToSearch={tokensToSearch}
-          searchPlaceholderText={t('swapSearchForAToken')}
-          fuseSearchKeys={fuseSearchKeys}
-          selectPlaceHolderText={t('swapSelectAToken')}
-          maxListItems={30}
-          onSelect={onToSelect}
-          loading={loading && (!tokensToSearch?.length || !topAssets || !Object.keys(topAssets).length)}
-          externallySelectedItem={selectedToToken}
-          hideItemIf={hideDropdownItemIf}
-          listContainerClassName="build-quote__open-to-dropdown"
-          hideRightLabels
-          defaultToAll
-
-        />
+        <div className="dropdown-input-pair dropdown-input-pair__to">
+          <DropdownSearchList
+            startingItem={selectedToToken}
+            itemsToSearch={tokensToSearch}
+            searchPlaceholderText={t('swapSearchForAToken')}
+            fuseSearchKeys={fuseSearchKeys}
+            selectPlaceHolderText={t('swapSelectAToken')}
+            maxListItems={30}
+            onSelect={onToSelect}
+            loading={loading && (!tokensToSearch?.length || !topAssets || !Object.keys(topAssets).length)}
+            externallySelectedItem={selectedToToken}
+            hideItemIf={hideDropdownItemIf}
+            listContainerClassName="build-quote__open-to-dropdown"
+            hideRightLabels
+            defaultToAll
+          />
+        </div>
         <div className="build-quote__slippage-buttons-container">
           <SlippageButtons
             onSelect={(newSlippage) => {
diff --git a/ui/app/pages/swaps/build-quote/index.scss b/ui/app/pages/swaps/build-quote/index.scss
index 7b0592ba8..8c97ff36a 100644
--- a/ui/app/pages/swaps/build-quote/index.scss
+++ b/ui/app/pages/swaps/build-quote/index.scss
@@ -118,4 +118,9 @@
       max-height: 276px;
     }
   }
+
+  /* Prevents the swaps "Swap to" field from overflowing */
+  .dropdown-input-pair__to .dropdown-search-list {
+    width: 100%;
+  }
 }
diff --git a/ui/app/pages/swaps/dropdown-search-list/index.scss b/ui/app/pages/swaps/dropdown-search-list/index.scss
index 6679b5b53..86e1338a1 100644
--- a/ui/app/pages/swaps/dropdown-search-list/index.scss
+++ b/ui/app/pages/swaps/dropdown-search-list/index.scss
@@ -126,6 +126,8 @@
     background: white;
     border-radius: 6px;
     min-height: 194px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__loading-item {