From 84b867d86cc1e73b48fba0c355c0859ecda0977a Mon Sep 17 00:00:00 2001 From: Dong-Ha Kim Date: Thu, 2 Nov 2023 07:57:25 +0100 Subject: [PATCH] fix: max button responsiveness --- .../InputWithMaxButton/InputWithMaxButton.styles.tsx | 1 + src/views/Bridge/components/AmountInput.tsx | 7 +++++++ .../StakingInputBlock/StakingInputBlock.styles.tsx | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/src/components/InputWithMaxButton/InputWithMaxButton.styles.tsx b/src/components/InputWithMaxButton/InputWithMaxButton.styles.tsx index be9375d65..20d92613c 100644 --- a/src/components/InputWithMaxButton/InputWithMaxButton.styles.tsx +++ b/src/components/InputWithMaxButton/InputWithMaxButton.styles.tsx @@ -73,6 +73,7 @@ export const MaxButton = styled(UnstyledButton)` @media ${QUERIESV2.sm.andDown} { height: 24px; padding: 0px 10px; + font-size: 12px; } `; diff --git a/src/views/Bridge/components/AmountInput.tsx b/src/views/Bridge/components/AmountInput.tsx index 100f503e4..9de940514 100644 --- a/src/views/Bridge/components/AmountInput.tsx +++ b/src/views/Bridge/components/AmountInput.tsx @@ -170,6 +170,13 @@ const MaxButtonWrapper = styled(UnstyledButton)` color: #e0f3ff; border-color: #e0f3ff; } + + @media ${QUERIESV2.sm.andDown} { + padding: 0 10px; + height: 24px; + font-size: 12px; + line-height: 14px; + } `; const AmountInnerWrapperTextStack = styled.div` diff --git a/src/views/Staking/components/StakingInputBlock/StakingInputBlock.styles.tsx b/src/views/Staking/components/StakingInputBlock/StakingInputBlock.styles.tsx index 41b1e6061..652478003 100644 --- a/src/views/Staking/components/StakingInputBlock/StakingInputBlock.styles.tsx +++ b/src/views/Staking/components/StakingInputBlock/StakingInputBlock.styles.tsx @@ -96,6 +96,7 @@ export const MaxButton = styled(UnstyledButton)` @media ${QUERIESV2.sm.andDown} { height: 24px; padding: 0px 10px; + font-size: 12px; } `; @@ -108,6 +109,9 @@ export const ButtonWrapper = styled.div` export const StakeButton = styled(PrimaryButton)` text-transform: capitalize; + @media ${QUERIESV2.sm.andDown} { + width: 100%; + } `; export const StakeButtonContentWrapper = styled.div`