responsive modals

src/components/modals/confirm/Address/index.js

@@ -13,7 +13,7 @@ import P from 'components/Paragraph';
 import type { Props } from '../../Container';
 
 const Wrapper = styled.div`
-    width: 390px;
+    max-width: 390px;
 `;
 
 const Header = styled.div`

src/components/modals/confirm/SignTx/index.js

@@ -20,7 +20,7 @@ type Props = {
 }
 
 const Wrapper = styled.div`
-    width: 390px;
+    max-width: 390px;
 `;
 
 const Header = styled.div`

src/components/modals/confirm/UnverifiedAddress/index.js

@@ -30,7 +30,7 @@ const StyledLink = styled(Link)`
 `;
 
 const Wrapper = styled.div`
-    width: 370px;
+    max-width: 370px;
     padding: 30px 48px;
 `;
 

src/components/modals/device/WalletType/index.js

@@ -25,7 +25,6 @@ type Props = {
 }
 
 const Wrapper = styled.div`
-    width: 360px;
 `;
 
 const Header = styled.div`

src/components/modals/passphrase/Type/index.js

@@ -18,7 +18,7 @@ type Props = {
 }
 
 const Wrapper = styled.div`
-    width: 360px;
+    max-width: 360px;
     padding: 30px 48px;
 `;
 

src/components/modals/pin/Pin/components/Button/index.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
-import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
+import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
 
 type Props = {
     onClick: () => void;
@@ -24,6 +24,11 @@ const Wrapper = styled.button`
     transition: all 0.3s;
     cursor: pointer;
 
+    @media screen and (max-width: ${SCREEN_SIZE.XS}) {
+        width: 50px;
+        height: 50px;
+    }
+
     &:first-child {
         margin-left: 0px;
     }