From 0a2718eeaa37eab75027f8511eb791ffb5bc285a Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Mon, 30 Nov 2015 11:34:33 -0300
Subject: [PATCH] fix button on small device

---
 public/views/backup.html | 30 +++++++++++++-----------------
 src/css/main.css         |  9 +++++++--
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/public/views/backup.html b/public/views/backup.html
index 621d20cb9..b6df0b9ec 100644
--- a/public/views/backup.html
+++ b/public/views/backup.html
@@ -84,7 +84,7 @@
         </div>
       </div>
 
-      <div class="columns" ng-show="!wordsC.credentialsEncrypted">
+      <div class="columns extra-padding-bottom" ng-show="!wordsC.credentialsEncrypted">
         <div class="line-t p10 size-10 text-gray text-center" ng-show="wordsC.mnemonicHasPassphrase">
             <i class="fi-alert"></i>
             <span translate>
@@ -110,7 +110,7 @@
     -->
 
     <div ng-show="wordsC.step == 2">
-      <div class="columns text-center">
+      <div class="columns text-center extra-padding-bottom">
         <h5>Confirm your wallet seed</h5>
         <p class="text-gray m0">
           Please tap the words in order to confirm your backup phrase is correctly written.
@@ -118,7 +118,7 @@
         <div class="panel words text-left" ng-class="{'enable_text_select': index.network == 'testnet'}">
           <div id="addWord"></div>
         </div>
-        <div class="text-left m20b" ng-class="{'enable_text_select': index.network == 'testnet'}" id="buttons">
+        <div class="text-left" ng-class="{'enable_text_select': index.network == 'testnet'}">
           <span ng-repeat="word in wordsC.shuffledMnemonicWords track by $index">
             <button class="button radius tiny words" ng-if="$index > 9" ng-click="wordsC.disableButton($index, word)" id="{{$index + word}}">{{word}}</button>
             <button class="button radius tiny words" ng-if="$index <= 9" ng-click="wordsC.disableButton('0' + $index, word)" id="{{'0' + $index + word}}">{{word}}</button>
@@ -200,30 +200,26 @@
       <div class="row m10t m10b text-center" ng-show="wordsC.backupError">
         <div class="circle-icon">
           <i class="fi-dislike size-48"></i>
-        </div>
-        <h5>Backup failed</h5>
+        </div>Backup failed</h5>
         <p class="text-gray columns" translate>
           Failed to verify backup. Please check your information
         </p>
+        <div class="columns size-10 text-gray extra-padding-bottom" ng-show="index.n==1">
+          <div class="p10t line-t">
+            <span translate>You can safely install your wallet on another device and use it from multiple devices at the same time.</span>
+            <a href="#" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/blob/master/README.md#copay-backups-and-recovery')" translate>
+              Learn more about Copay backups
+            </a>
+          </div>
+        </div>
 
         <div class="button-box">
           <button
             ng-style="{'background-color':index.backgroundColor}"
-            class="button round expand"
+            class="button round expand m0"
             ng-click="wordsC.goToStep(1);"
             translate>Try again
           </button>
-          <!-- hide this in multisig just to show less text -->
-          <div class="row m20t"  ng-show="index.n==1">
-            <div class="columns size-10 text-gray">
-              <div class="p10t line-t">
-                <span translate>You can safely install your wallet on another device and use it from multiple devices at the same time.</span>
-                <a href="#" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/blob/master/README.md#copay-backups-and-recovery')" translate>
-                  Learn more about Copay backups
-                </a>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/css/main.css b/src/css/main.css
index 59eac4d29..9dd839587 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -395,11 +395,12 @@ ul.tx-copayers {
 }
 
 .backup .button-box {
-  position: absolute;
+  background: #F1F3F5;
+  position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
-  padding: 1.5rem 1rem;
+  padding: 0.5rem 1rem 1rem;
   z-index: 9999;
 }
 
@@ -411,6 +412,10 @@ ul.tx-copayers {
   border-bottom: 1px solid #A5B2BF;
 }
 
+.extra-padding-bottom {
+  padding-bottom: 78px;
+}
+
 .date-message {
   background-color: #213140;
   border-radius: 3px;