diff --git a/css/main.css b/css/main.css
index 0c9cf06b5..037b80b42 100644
--- a/css/main.css
+++ b/css/main.css
@@ -223,6 +223,11 @@ small.has-error {
   font-weight: bold;
 }
 
+.small {
+  font-size: 60%;
+  line-height: inherit;
+}
+
 @media (max-width: 641px) {
   .hide_menu {
     display: none;
@@ -265,7 +270,9 @@ hr { margin: 2.25rem 0;}
 .size-48 { font-size: 48px; }
 .size-60 { font-size: 60px; }
 .size-72 { font-size: 72px; }
+.m5t {margin-top: 5px;}
 .m10t {margin-top: 10px;}
+.m5b {margin-bottom: 5px;}
 .m10b {margin-bottom: 10px;}
 .m15b {margin-bottom: 20px !important;}
 .m10r {margin-right: 10px;}
@@ -607,3 +614,10 @@ p.dr-notification-text {
   font-size: 12px;
 }
 
+.ellipsis {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
diff --git a/css/tpl-default.css b/css/tpl-default.css
index f81b4ff12..9e1f7b00e 100644
--- a/css/tpl-default.css
+++ b/css/tpl-default.css
@@ -178,10 +178,6 @@ small.has-error {
 .transactions button, .transactions .button {
   padding: 0.5rem 2rem;
 }
-.small {
-  font-size: 60%;
-  line-height: inherit;
-}
 
 button.radius, .button.radius {
   -webkit-border-radius: 5px;
@@ -321,3 +317,7 @@ input.ng-invalid-wallet-secret {
   color: #B4D455;
 }
 
+.success {
+  color: #3FBC9C;
+}
+
diff --git a/index.html b/index.html
index 3bd01f64d..6e32d827c 100644
--- a/index.html
+++ b/index.html
@@ -141,7 +141,7 @@
       <div class="large-9 medium-9 small-9 columns">
         <a href="#/addresses" > </a>
         <div class="bottom-copay" 
-            ng-repeat="c in $root.wallet.getRegisteredPeerIds()" class="has-tip" tooltip-placement="top" tooltip="{{c.nick}}">
+            ng-repeat="c in $root.wallet.getRegisteredPeerIds()" class="has-tip" tooltip-popup-delay="1000" tooltip-placement="top" tooltip="{{c.nick}}">
           <video ng-if="$root.videoInfo[c.peerId]" 
             avatar peer="{{c}}"
             autoplay
@@ -365,14 +365,14 @@
             <div class="panel radius pending" ng-repeat="tx in txs | orderBy: 'createdTs':true">
               <div class="txheader">
                 <div class="row m10">
-                  <div class="large-8 columns">
+                  <div class="large-8 medium-8 small-12 columns">
                     <div class="row" ng-repeat="out in tx.outs">
-                      <p class="large-3 columns"> {{out.value}} <i class="fi-bitcoin size-18"></i></p>
-                      <i class="large-1 columns fi-arrow-right size-24"> </i>
-                      <p class="large-8 columns"> {{out.address}} </p>
+                      <div class="large-3 medium-3 small-3 columns ellipsis"> {{out.value}} <i class="fi-bitcoin size-18"></i></div>
+                      <div class="large-1 medium-1 small-2 columns fi-arrow-right size-24"> </div>
+                      <div class="large-8 medium-8 small-7 columns ellipsis"> {{out.address}} </div>
                     </div>
                   </div>
-                  <div class="large-4 columns text-right">
+                  <div class="large-4 medium-4 small-12 columns text-right">
                     <h6>{{tx.createdTs | amCalendar}}</h6>
                   </div>
                 </div>
@@ -382,22 +382,22 @@
 
                 <div class="box-copayers" ng-repeat="(cId, actions) in tx.peerActions">
                   <figure class="left">
-                    <a href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
+                    <a href="#/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
                       <img src="./img/satoshi.gif" alt="{{cId}}" width="200">
                     </a>
                   </figure>
                   <div class="box-status">
                     <span ng-repeat="(action, ts) in actions">
-                      <a ng-if="action == 'create'" href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="Created {{ts | amTimeAgo}}">
+                      <a ng-if="action == 'create'" href="#/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
                         <i class="fi-crown size-12 icon-status icon-active"></i>
                       </a>
-                      <a ng-if="action == 'seen'" href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="Seen {{ts | amTimeAgo}}">
+                      <a ng-if="action == 'seen'" href="#/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
                         <i class="fi-eye size-12 icon-status icon-active"></i>
                       </a>
-                      <a ng-if="action == 'sign'" href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="Signed {{ts | amTimeAgo}}">
+                      <a ng-if="action == 'sign'" href="#/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
                         <i class="fi-check size-12 icon-status icon-active-check"></i>
                       </a>
-                      <a ng-if="action == 'rejected'" href="#/transactions" class="has-tip" tooltip-popup-delay='1000' tooltip="Rejected {{ts | amTimeAgo}}">
+                      <a ng-if="action == 'rejected'" href="#/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
                         <i class="fi-x size-12 icon-status icon-active-x"></i>
                       </a>
                     </span>
@@ -409,7 +409,7 @@
                 </div> 
               </div>
 
-              <div class="row m15">
+              <div class="row m10">
                 <div class="large-5 columns" ng-show="!tx.sentTs" style="padding-left: 5px;">
                   <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures"> 
                     <button class="secondary radius m10r"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
@@ -427,30 +427,29 @@
                 </div>
     
                 <div class="large-7 columns text-right">
-                  <span ng-show="tx.finallyRejected" class="text-warning">
+                  <div ng-show="tx.finallyRejected" class="text-warning m10b">
                     Transaction finally rejected
-                  </span>
-                  <div ng-show="!tx.missingSignatures && tx.sentTs">
-                  <span>
-                    Sent
-                  </span>
-                  <p class="text-gray small">
-                    <span am-time-ago="tx.sentTs"></span>.
-                    ID: 
-                    <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="blank">
-                        {{tx.sentTxid}}
-                    </a>
-                  </p>
                   </div>
-                  <p class="text-gray" ng-show="!tx.finallyRejected && tx.missingSignatures==1"> 
+                  <div ng-show="!tx.missingSignatures && tx.sentTs">
+                    <div class="success m10b">
+                      <strong>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
+                    </div>
+                    <div class="ellipsis small">
+                      Transaction ID: 
+                      <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="blank">
+                        {{tx.sentTxid}}
+                      </a>
+                    </div>
+                  </div>
+                  <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures==1"> 
                     One signature missing
                   </p>
-                  <p class="text-gray" ng-show="!tx.finallyRejected && tx.missingSignatures>1"> 
+                  <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1"> 
                     {{tx.missingSignatures}} signatures missing</p>
-                  <small class="right text-gray"> 
-                    <strong>  Fee: </strong> <i class="fi-bitcoin"></i> {{tx.fee}}
-                    <strong> Proposal ID: </strong> {{tx.ntxid}} 
-                  </small>
+                  <div class="ellipsis small text-gray"> 
+                    <strong>Fee:</strong> <i class="fi-bitcoin"></i> {{tx.fee}}
+                    <strong>Proposal ID:</strong> {{tx.ntxid}} 
+                  </div>
                 </div>
               </div>
             </div>