mirror of
https://github.com/trezor/trezor-wallet
synced 2025-02-05 04:41:25 +00:00
Merge pull request #315 from trezor/fix/huge-fee-overflow
Fix fee label overflow
This commit is contained in:
commit
5416baa358
@ -87,6 +87,20 @@ const FeeOptionWrapper = styled.div`
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const OptionValue = styled(P)`
|
||||
flex: 1 0 auto;
|
||||
min-width: 70px;
|
||||
margin-right: 5px;
|
||||
`;
|
||||
|
||||
const OptionLabel = styled(P)`
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
`;
|
||||
|
||||
const FeeLabelWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -348,8 +362,8 @@ const AccountSend = (props: Props) => {
|
||||
options={feeLevels}
|
||||
formatOptionLabel={option => (
|
||||
<FeeOptionWrapper>
|
||||
<P>{option.value}</P>
|
||||
<P>{option.label}</P>
|
||||
<OptionValue>{option.value}</OptionValue>
|
||||
<OptionLabel>{option.label}</OptionLabel>
|
||||
</FeeOptionWrapper>
|
||||
)}
|
||||
/>
|
||||
|
@ -74,6 +74,20 @@ const FeeOptionWrapper = styled.div`
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const OptionValue = styled(P)`
|
||||
flex: 1 0 auto;
|
||||
min-width: 70px;
|
||||
margin-right: 5px;
|
||||
`;
|
||||
|
||||
const OptionLabel = styled(P)`
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
`;
|
||||
|
||||
const FeeLabelWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -302,8 +316,8 @@ const AccountSend = (props: Props) => {
|
||||
options={feeLevels}
|
||||
formatOptionLabel={option => (
|
||||
<FeeOptionWrapper>
|
||||
<P>{option.value}</P>
|
||||
<P>{option.label}</P>
|
||||
<OptionValue>{option.value}</OptionValue>
|
||||
<OptionLabel>{option.label}</OptionLabel>
|
||||
</FeeOptionWrapper>
|
||||
)}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user