1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Fix 9638 - Prevent excessive overflow from swap dropdowns

This commit is contained in:
David Walsh 2020-10-19 15:38:01 -05:00
parent d44c03b882
commit a6fd1266aa
3 changed files with 24 additions and 16 deletions

View File

@ -241,22 +241,23 @@ export default function BuildQuote ({
<div className="build-quote__dropdown-swap-to-header"> <div className="build-quote__dropdown-swap-to-header">
<div className="build-quote__input-label">{t('swapSwapTo')}</div> <div className="build-quote__input-label">{t('swapSwapTo')}</div>
</div> </div>
<DropdownSearchList <div className="dropdown-input-pair dropdown-input-pair__to">
startingItem={selectedToToken} <DropdownSearchList
itemsToSearch={tokensToSearch} startingItem={selectedToToken}
searchPlaceholderText={t('swapSearchForAToken')} itemsToSearch={tokensToSearch}
fuseSearchKeys={fuseSearchKeys} searchPlaceholderText={t('swapSearchForAToken')}
selectPlaceHolderText={t('swapSelectAToken')} fuseSearchKeys={fuseSearchKeys}
maxListItems={30} selectPlaceHolderText={t('swapSelectAToken')}
onSelect={onToSelect} maxListItems={30}
loading={loading && (!tokensToSearch?.length || !topAssets || !Object.keys(topAssets).length)} onSelect={onToSelect}
externallySelectedItem={selectedToToken} loading={loading && (!tokensToSearch?.length || !topAssets || !Object.keys(topAssets).length)}
hideItemIf={hideDropdownItemIf} externallySelectedItem={selectedToToken}
listContainerClassName="build-quote__open-to-dropdown" hideItemIf={hideDropdownItemIf}
hideRightLabels listContainerClassName="build-quote__open-to-dropdown"
defaultToAll hideRightLabels
defaultToAll
/> />
</div>
<div className="build-quote__slippage-buttons-container"> <div className="build-quote__slippage-buttons-container">
<SlippageButtons <SlippageButtons
onSelect={(newSlippage) => { onSelect={(newSlippage) => {

View File

@ -118,4 +118,9 @@
max-height: 276px; max-height: 276px;
} }
} }
/* Prevents the swaps "Swap to" field from overflowing */
.dropdown-input-pair__to .dropdown-search-list {
width: 100%;
}
} }

View File

@ -126,6 +126,8 @@
background: white; background: white;
border-radius: 6px; border-radius: 6px;
min-height: 194px; min-height: 194px;
overflow: hidden;
text-overflow: ellipsis;
} }
&__loading-item { &__loading-item {