Fix scroll in modals

public/views/modals/copayers.html

@@ -12,14 +12,17 @@
   </section>
 </nav>
 
-<ul class="no-bullet p45t">
-  <li class="line-b p10" ng-repeat="copayer in copayers">
-  <span class="size-12" ng-show="copayer.id == copayerId">
-     <i class="icon-contact size-24 m10r"></i> {{copayer.name}} ({{'Me'|translate}}) <i class="fi-check m5 right"></i>
-  </span>
-  <span class="size-12 text-gray" ng-show="copayer.id != copayerId">
-    <i class="icon-contact size-24 m10r"></i> {{copayer.name}}<i class="fi-check m5 right"></i>
-  </span>
-  </li>
-</ul>
+<div class="modal-content">
+  <ul class="no-bullet">
+    <li class="line-b p10" ng-repeat="copayer in copayers">
+      <span class="size-12" ng-show="copayer.id == copayerId">
+        <i class="icon-contact size-24 m10r"></i> {{copayer.name}} ({{'Me'|translate}}) <i class="fi-check m5 right"></i>
+      </span>
+      <span class="size-12 text-gray" ng-show="copayer.id != copayerId">
+        <i class="icon-contact size-24 m10r"></i> {{copayer.name}}<i class="fi-check m5 right"></i>
+      </span>
+    </li>
+  </ul>
+  <div class="extra-margin-bottom"></div>
+</div>
 

public/views/modals/paypro.html

@@ -11,7 +11,7 @@
   </section>
 </nav>
 
-<div class="p45t">
+<div class="modal-content">
   <div class="header-modal text-center">
     <div class="size-42">
       {{unitTotal}}  {{unitName}}
@@ -48,7 +48,6 @@
     <span class="right">{{paypro.expires * 1000 | amTimeAgo }}</span>
     </li>
   </ul>
+  <div class="extra-margin-bottom"></div>
 </div>
 
-<div class="extra-margin-bottom"></div>
-

public/views/modals/scanner.html

@@ -10,7 +10,7 @@
     </h1>
   </section>
 </nav>
-<div class="p60t text-center" ng-init="init()">
+<div class="modal-content text-center" ng-init="init()">
   <canvas id="qr-canvas" width="200" height="150"></canvas>
   <video id="qrcode-scanner-video" width="300" height="225"></video>
 </div>

public/views/modals/tx-details.html

@@ -12,7 +12,7 @@
   </section>
 </nav>
 
-<div class="p45t">
+<div class="modal-content">
   <div class="header-modal text-center">
     <div class="size-42">
       <span ng-if="btx.action == 'received'">+</span><span ng-if="btx.action == 'sent'">-</span>{{btx.amountStr}} {{settings.unitName}}
@@ -89,5 +89,5 @@
     </div>
   </div>
 
+  <div class="extra-margin-bottom"></div>
 </div>
-<div class="extra-margin-bottom"></div>

public/views/modals/txp-details.html

@@ -11,7 +11,7 @@
     </h1>
   </section>
 </nav>
-<div class="p45t" ng-init="updateCopayerList()">
+<div class="modal-content" ng-init="updateCopayerList()">
   <h4 class="title m0" translate>Details</h4>
   <ul class="no-bullet size-14 m0">
     <li class="line-b p10 oh" ng-click="copyAddress(tx.toAddress)">
@@ -143,5 +143,5 @@
     </button>
   </div>
 
+  <div class="extra-margin-bottom"></div>
 </div>
-<div class="extra-margin-bottom"></div>

src/css/mobile.css

@@ -28,7 +28,7 @@ input {
   -webkit-tap-highlight-color:rgba(0,0,0,0);
 }
 
-body, div, .row {
+.touch {
   -webkit-overflow-scrolling: touch;
 }
 
@@ -90,11 +90,7 @@ _:-ms-fullscreen, :root .main {
 
 .tab-bar {
   background: #FFFFFF;
-  display: block;
-  position: fixed;
-  width: 100%;
   z-index: 5;
-  line-height: 3.2rem;
   border-bottom: 1px solid #E9E9EC;
 }
 
@@ -563,12 +559,19 @@ to prevent collapsing during animation*/
   top: 0 !important;
 }
 
+.modal-content {
+  position: fixed;
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  top: 33px;
+  padding-bottom: 33px;
+}
+
 .reveal-modal {
   padding: 0;
   border: none;
   border-radius: 0;
-  overflow-y: auto;
-  padding-bottom: 20px;
   outline: 0;
 }