fix: fix overflowing lp ui (#6138)

* fix

* incorporate comments from jordan + tina
This commit is contained in:
lynn 2023-03-13 11:47:19 -04:00 committed by GitHub
parent 5c8b45c8e5
commit bf337f2865
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -77,7 +77,8 @@ const DoubleArrow = styled.span`
color: ${({ theme }) => theme.textTertiary}; color: ${({ theme }) => theme.textTertiary};
` `
const RangeText = styled.span` const RangeText = styled.div`
word-break: break-word;
padding: 0.25rem 0.25rem; padding: 0.25rem 0.25rem;
border-radius: 8px; border-radius: 8px;
` `
@ -251,11 +252,13 @@ export default function PositionListItem({
<Trans>Min: </Trans> <Trans>Min: </Trans>
</ExtentsText> </ExtentsText>
<Trans> <Trans>
<span>
{formatTickPrice({ {formatTickPrice({
price: priceLower, price: priceLower,
atLimit: tickAtLimit, atLimit: tickAtLimit,
direction: Bound.LOWER, direction: Bound.LOWER,
})}{' '} })}{' '}
</span>
<HoverInlineText text={currencyQuote?.symbol} /> per <HoverInlineText text={currencyBase?.symbol ?? ''} /> <HoverInlineText text={currencyQuote?.symbol} /> per <HoverInlineText text={currencyBase?.symbol ?? ''} />
</Trans> </Trans>
</RangeText>{' '} </RangeText>{' '}
@ -270,11 +273,13 @@ export default function PositionListItem({
<Trans>Max:</Trans> <Trans>Max:</Trans>
</ExtentsText> </ExtentsText>
<Trans> <Trans>
<span>
{formatTickPrice({ {formatTickPrice({
price: priceUpper, price: priceUpper,
atLimit: tickAtLimit, atLimit: tickAtLimit,
direction: Bound.UPPER, direction: Bound.UPPER,
})}{' '} })}{' '}
</span>
<HoverInlineText text={currencyQuote?.symbol} /> per{' '} <HoverInlineText text={currencyQuote?.symbol} /> per{' '}
<HoverInlineText maxCharacters={10} text={currencyBase?.symbol} /> <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
</Trans> </Trans>