diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index b6330974..b9df79fc 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -25,21 +25,27 @@ const Wrapper = styled.div`
font-size: ${FONT_SIZE.SMALL};
background: ${colors.LANDING};
color: ${colors.TEXT_SECONDARY};
- padding: 22px 48px;
+ padding: 10px 30px;
display: flex;
+ height: 59px;
+ flex-wrap: wrap;
+ align-items: center;
justify-content: space-between;
border-top: 1px solid ${colors.BACKGROUND};
+
+ @media all and (max-width: 850px) {
+ justify-content: center;
+ }
`;
const StyledLink = styled(Link)`
- margin: 0 6px;
- margin-right: 20px;
+ margin: 0 10px;
white-space: nowrap;
`;
const Copy = styled.div`
white-space: nowrap;
- margin-right: 20px;
+ margin-right: 10px;
`;
const Left = styled.div`
@@ -48,6 +54,7 @@ const Left = styled.div`
const Right = styled.div`
white-space: nowrap;
+ margin: 0 10px;
`;
const Footer = ({ opened, toggle, isLanding }: Props) => (
@@ -60,7 +67,7 @@ const Footer = ({ opened, toggle, isLanding }: Props) => (
{!isLanding && (
- Exchange rates byCoingecko
+ Exchange rates by Coingecko
)}
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index 5c6bef36..086caee9 100644
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -10,6 +10,10 @@ const styles = isSearchable => ({
width: '100%',
color: colors.TEXT_SECONDARY,
}),
+ valueContainer: base => ({
+ ...base,
+ overflow: 'hidden',
+ }),
control: (base, { isDisabled }) => ({
...base,
minHeight: 'initial',
diff --git a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js b/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js
index 0e5eda43..f3cf54b4 100644
--- a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js
+++ b/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js
@@ -76,7 +76,7 @@ class Indicator extends PureComponent {
const active = wrapper.querySelector('.active');
if (!active) return;
const bounds = active.getBoundingClientRect();
- const left = bounds.left - wrapper.getBoundingClientRect().left;
+ const left = bounds.left - wrapper.getBoundingClientRect().left + wrapper.scrollLeft;
const { state } = this;
if (state.style.left !== left) {
diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js
index d61d05fd..5f9ae7cc 100644
--- a/src/views/Wallet/components/TopNavigationAccount/index.js
+++ b/src/views/Wallet/components/TopNavigationAccount/index.js
@@ -21,9 +21,9 @@ const Wrapper = styled.div`
height: 100%;
flex: 1;
align-items: center;
- justify-content: space-between;
- padding: 0px 30px 0 40px;
- max-width: 600px;
+ padding: 0px 30px 0 35px;
+ overflow-y: hidden;
+ overflow-x: auto;
`;
const StyledNavLink = styled(NavLink)`
@@ -31,9 +31,9 @@ const StyledNavLink = styled(NavLink)`
font-size: ${FONT_SIZE.TOP_MENU};
color: ${colors.TEXT_SECONDARY};
margin: 0px 4px;
- padding: 20px;
+ padding: 20px 35px;
white-space: nowrap;
-
+
&.active,
&:hover {
transition: all 0.3s ease-in-out;
diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js
index 78679df7..1a63e5f5 100644
--- a/src/views/Wallet/index.js
+++ b/src/views/Wallet/index.js
@@ -53,7 +53,6 @@ const WalletWrapper = styled.div`
display: flex;
flex-direction: row;
border-radius: 4px 4px 0px 0px;
- overflow: hidden;
margin-top: 32px;
@media screen and (max-width: 1170px) {
@@ -66,6 +65,7 @@ const MainContent = styled.article`
flex: 1;
display: flex;
flex-direction: column;
+ overflow: auto;
`;
const Navigation = styled.nav`
diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js
index d1570034..11e9b0fe 100644
--- a/src/views/Wallet/views/Account/SignVerify/index.js
+++ b/src/views/Wallet/views/Account/SignVerify/index.js
@@ -25,11 +25,29 @@ const RowButtons = styled(Row)`
display: flex;
align-items: center;
justify-content: flex-end;
+
+ @media all and (max-width: 850px) {
+ flex-wrap: wrap;
+ margin: -5px;
+ }
`;
const StyledButton = styled(Button)`
- margin-left: 10px;
width: 110px;
+ margin-left: 10px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ @media all and (max-width: 850px) {
+ flex: 1;
+ margin: 5px;
+
+ &:first-child {
+ margin-left: 5px;
+ }
+ }
`;
const Column = styled.div`
@@ -116,11 +134,11 @@ class SignVerify extends Component {
/>
-
+
signVerifyActions.sign(account.accountPath, signMessage)}
>Sign
@@ -164,11 +182,11 @@ class SignVerify extends Component {
/>
-
+
{