Merge pull request #9642 from darkwing/9638-swap-overflow-2

Fix 9638 - Prevent excessive overflow from swap dropdowns

ui/app/pages/swaps/build-quote/build-quote.js

@@ -241,6 +241,7 @@ export default function BuildQuote ({
         <div className="build-quote__dropdown-swap-to-header">
           <div className="build-quote__input-label">{t('swapSwapTo')}</div>
         </div>
+        <div className="dropdown-input-pair dropdown-input-pair__to">
           <DropdownSearchList
             startingItem={selectedToToken}
             itemsToSearch={tokensToSearch}
@@ -255,8 +256,8 @@ export default function BuildQuote ({
             listContainerClassName="build-quote__open-to-dropdown"
             hideRightLabels
             defaultToAll
-
           />
+        </div>
         <div className="build-quote__slippage-buttons-container">
           <SlippageButtons
             onSelect={(newSlippage) => {

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

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 {