feat(backup phrrase): resize image on smaller height screens

blockchain · Sep 16, 2020 · 520b717 · 520b717
1 parent 0f0fb54
commit 520b717
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/...chain-wallet-v4-frontend/src/modals/Settings/RecoveryPhrase/RecoveryPhraseIntro/index.tsx b/...chain-wallet-v4-frontend/src/modals/Settings/RecoveryPhrase/RecoveryPhraseIntro/index.tsx
@@ -34,6 +34,17 @@ const ButtonWrapper = styled(FlyoutWrapper)`
   }
 `
 
+const ImageContainer = styled.div`
+  @media only screen and (max-height: 600px) {
+    width: 100%;
+    justify-content: center;
+    display: flex;
+    img {
+      max-width: 180px;
+    }
+  }
+`
+
 class RecoveryPhraseIntro extends PureComponent<Props> {
   handleBackupNow = () => {
     this.props.recoveryPhraseActions.setStep('FIRST_SET_WORDS')
@@ -64,7 +75,9 @@ class RecoveryPhraseIntro extends PureComponent<Props> {
               />
             </Text>
           </ContentContainer>
-          <Image name='recover-padlock' width='375px' />
+          <ImageContainer>
+            <Image name='recover-padlock' width='375px' />
+          </ImageContainer>
         </FlyoutWrapper>
 
         <ButtonWrapper>