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

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

Fix 9638 - Prevent excessive overflow from swap dropdowns
This commit is contained in:
David Walsh 2020-10-20 09:16:34 -05:00 committed by GitHub
commit fe970a7be8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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__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) => {

View File

@ -118,4 +118,9 @@
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;
border-radius: 6px;
min-height: 194px;
overflow: hidden;
text-overflow: ellipsis;
}
&__loading-item {