Merge pull request #289 from trezor/fix/overflow

Fix overflow issues by making UI more responsive

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: 0 10px;
-    margin-right: 20px;
     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) => (
         </Left>
         {!isLanding && (
             <Right>
-                Exchange rates by<StyledLink href="https://www.coingecko.com" isGreen>Coingecko</StyledLink>
+                Exchange rates by <Link href="https://www.coingecko.com" isGreen>Coingecko</Link>
             </Right>
         )}
     </Wrapper>

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',

src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js

@@ -76,7 +76,7 @@ class Indicator extends PureComponent<Props, State> {
         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) {

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 35px;
-    padding: 0px 30px 0 40px;
+    overflow-y: hidden;
-    max-width: 600px;
+    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;

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`

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 <Props> {
                             />
                         </Row>
                         <RowButtons>
-                            <Button
+                            <StyledButton
                                 onClick={this.props.signVerifyActions.clearSign}
                                 isWhite
                             >Clear
-                            </Button>
+                            </StyledButton>
                             <StyledButton
                                 onClick={() => signVerifyActions.sign(account.accountPath, signMessage)}
                             >Sign
@@ -164,11 +182,11 @@ class SignVerify extends Component <Props> {
                             />
                         </Row>
                         <RowButtons>
-                            <Button
+                            <StyledButton
                                 onClick={signVerifyActions.clearVerify}
                                 isWhite
                             >Clear
-                            </Button>
+                            </StyledButton>
                             <StyledButton
                                 onClick={
                                     () => {