more responsive pending tx

src/components/Transaction/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-
+import { SCREEN_SIZE } from 'config/variables';
 import { Link, colors } from 'trezor-ui-components';
 
 import type { Transaction, Network } from 'flowtype';
@@ -17,14 +17,19 @@ const Wrapper = styled.div`
     padding: 14px 0;
     display: flex;
     flex-direction: row;
+    word-break: break-all;
 
     &:last-child {
         border-bottom: 0px;
     }
+
+    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
+        flex-direction: column;
+    }
 `;
 
 const Addresses = styled.div`
-    flex: 1;
+    flex: 1 1 auto;
 `;
 
 const Address = styled.div`
@@ -43,9 +48,16 @@ const Date = styled(Link)`
     line-height: 18px;
     padding-right: 8px;
     border-bottom: 0px;
+    flex: 0 1 auto;
+    word-break: normal;
+`;
+
+const TransactionHash = styled(Date)`
+    word-break: break-all;
 `;
 
 const Value = styled.div`
+    flex: 1 1 auto;
     padding-left: 8px;
     white-space: nowrap;
     text-align: right;
@@ -100,9 +112,9 @@ const TransactionItem = ({ tx, network }: Props) => {
                     <Address key={addr}>{addr}</Address>
                 ))}
                 {!tx.blockHeight && (
-                    <Date href={url} isGray>
+                    <TransactionHash href={url} isGray>
                         Transaction hash: {tx.hash}
-                    </Date>
+                    </TransactionHash>
                 )}
             </Addresses>
             <Value className={tx.type}>

src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react';
 import styled from 'styled-components';
-import { colors, H5 } from 'trezor-ui-components';
+import { colors, H5, P } from 'trezor-ui-components';
 import Transaction from 'components/Transaction';
 
 import type { Network } from 'reducers/LocalStorageReducer';
@@ -18,6 +18,8 @@ const Wrapper = styled.div`
     border-top: 1px solid ${colors.DIVIDER};
 `;
 
+const NoTransactions = styled(P)``;
+
 const PendingTransactions = (props: Props) => {
     // const pending = props.pending.filter(tx => !tx.rejected).concat(testData);
     const pending = props.pending.filter(tx => !tx.rejected);
@@ -25,6 +27,9 @@ const PendingTransactions = (props: Props) => {
     return (
         <Wrapper>
             <H5>Pending transactions</H5>
+            {pending.length === 0 && (
+                <NoTransactions>There are no pending transactions</NoTransactions>
+            )}
             {pending.map(tx => (
                 <Transaction key={tx.hash} network={props.network} tx={tx} />
             ))}