diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js index 3a87a335..cd7f924c 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js @@ -13,6 +13,11 @@ import ICONS from 'config/icons'; import type { Props } from '../../Container'; +// TODO: Decide on a small screen width for the whole app +// and put it inside config/variables.js +// same variable also in "AccountSend/index.js" +const SmallScreenWidth = '850px'; + const InputRow = styled.div` margin-bottom: 20px; `; @@ -38,12 +43,24 @@ const AdvancedSettingsWrapper = styled.div` const GasInputRow = styled(InputRow)` width: 100%; display: flex; + + @media screen and (max-width: ${SmallScreenWidth}) { + flex-direction: column; + } `; const GasInput = styled(Input)` + min-height: 85px; &:first-child { padding-right: 20px; } + + @media screen and (max-width: ${SmallScreenWidth}) { + &:first-child { + padding-right: 0; + margin-bottom: 2px; + } + } `; const StyledTextarea = styled(Textarea)` @@ -204,7 +221,7 @@ const AdvancedForm = (props: Props) => { )} bottomText={errors.data || warnings.data || infos.data} - disabled={networkSymbol !== currency} + isDisabled={networkSymbol !== currency} value={networkSymbol !== currency ? '' : data} onChange={event => onDataChange(event.target.value)} />