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,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) => {

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 {