1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +00:00

fix fee label overflow

This commit is contained in:
slowbackspace 2019-01-09 13:26:42 +01:00
parent 8820aa68f7
commit e59c3436bb
2 changed files with 30 additions and 4 deletions

View File

@ -87,6 +87,19 @@ const FeeOptionWrapper = styled.div`
justify-content: space-between; justify-content: space-between;
`; `;
const OptionValue = styled(P)`
flex: 0 0 0;
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` const FeeLabelWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
@ -348,8 +361,8 @@ const AccountSend = (props: Props) => {
options={feeLevels} options={feeLevels}
formatOptionLabel={option => ( formatOptionLabel={option => (
<FeeOptionWrapper> <FeeOptionWrapper>
<P>{option.value}</P> <OptionValue>{option.value}</OptionValue>
<P>{option.label}</P> <OptionLabel>{option.label}</OptionLabel>
</FeeOptionWrapper> </FeeOptionWrapper>
)} )}
/> />

View File

@ -74,6 +74,19 @@ const FeeOptionWrapper = styled.div`
justify-content: space-between; justify-content: space-between;
`; `;
const OptionValue = styled(P)`
flex: 0 0 0;
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` const FeeLabelWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
@ -302,8 +315,8 @@ const AccountSend = (props: Props) => {
options={feeLevels} options={feeLevels}
formatOptionLabel={option => ( formatOptionLabel={option => (
<FeeOptionWrapper> <FeeOptionWrapper>
<P>{option.value}</P> <OptionValue>{option.value}</OptionValue>
<P>{option.label}</P> <OptionLabel>{option.label}</OptionLabel>
</FeeOptionWrapper> </FeeOptionWrapper>
)} )}
/> />