From ba22ee46743bd9e85607c690bcbab32ac6059bc9 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Wed, 23 Apr 2014 17:45:49 +0200
Subject: [PATCH] [WO-336] Fix floating fingerprint popup in contacts view

---
 src/sass/views/_contacts.scss | 15 +++++++++---
 src/sass/views/_write.scss    |  3 ++-
 src/tpl/contacts.html         | 46 +++++++++++++++++++----------------
 3 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/sass/views/_contacts.scss b/src/sass/views/_contacts.scss
index a4bd33b..98c8d05 100644
--- a/src/sass/views/_contacts.scss
+++ b/src/sass/views/_contacts.scss
@@ -15,9 +15,13 @@
     }
 
     .key-list {
-        max-height: 400px;
+        position: relative;
         margin: 20px;
-        overflow-y: scroll;
+
+        .key-list-scroll {
+            max-height: 400px;
+            overflow-y: scroll;
+        }
 
         table {
             th, td {
@@ -37,6 +41,11 @@
                 outline: none;
             }
         }
+
+        // pull popover upwards to keep popup inside lightbox
+        .popover {
+            margin-top: -20px;
+        }
     }
-    
+
 }
\ No newline at end of file
diff --git a/src/sass/views/_write.scss b/src/sass/views/_write.scss
index d5bbf16..32a615c 100644
--- a/src/sass/views/_write.scss
+++ b/src/sass/views/_write.scss
@@ -8,7 +8,8 @@
 
     height: 100%;
     @include respond-to(desktop) {
-        height: 600px;
+        // this number depends on max-height set on .lightbox
+        height: 590px; // magic number
     }
 
     input {
diff --git a/src/tpl/contacts.html b/src/tpl/contacts.html
index 0e69e2b..aaf7781 100644
--- a/src/tpl/contacts.html
+++ b/src/tpl/contacts.html
@@ -16,30 +16,34 @@
       </div>
 
       <div class="key-list">
-        <table>
-          <tr>
-            <th>Key ID</th>
-            <th>Email</th>
-            <th>Created</th>
-            <th>Size</th>
-          </tr>
-          <tr ng-repeat="key in keys | orderBy:'userId' | filter:searchText">
-            <td class="hover" ng-mouseover="getFingerprint(key)" popover="#fingerprint-contact">{{key._id.slice(8)}}</td>
-            <td>{{key.userId}}</td>
-            <td>{{key.created | date:'mediumDate'}}</td>
-            <td>{{key.bitSize}} bit</td>
-            <td><button class="remove" ng-click="removeKey(key)">&#xe007;</button></td>
-          </tr>
-        </table>
-      </div>
+        <div class="key-list-scroll">
+          <table>
+            <tr>
+              <th>Key ID</th>
+              <th>Email</th>
+              <th>Created</th>
+              <th>Size</th>
+            </tr>
+            <tr ng-repeat="key in keys | orderBy:'userId' | filter:searchText">
+              <td class="hover" ng-mouseover="getFingerprint(key)" popover="#fingerprint-contact">{{key._id.slice(8)}}</td>
+              <td>{{key.userId}}</td>
+              <td>{{key.created | date:'mediumDate'}}</td>
+              <td>{{key.bitSize}} bit</td>
+              <td><button class="remove" ng-click="removeKey(key)">&#xe007;</button></td>
+            </tr>
+          </table>
+        </div><!--/.key-list-scroll-->
+
+        <!-- popovers -->
+        <div id="fingerprint-contact" class="popover right" ng-controller="PopoverCtrl">
+          <div class="popover-title"><b>Fingerprint</b></div>
+          <div class="popover-content">{{fingerprint}}</div>
+        </div><!--/.popover-->
+      </div><!--/.key-list-->
 
     </div><!-- /.view-contacts -->
   </div><!-- /.content -->
 
-  <!-- popovers -->
-  <div id="fingerprint-contact" class="popover right" ng-controller="PopoverCtrl">
-    <div class="popover-title"><b>Fingerprint</b></div>
-    <div class="popover-content">{{fingerprint}}</div>
-  </div><!--/.popover-->
+
 
 </div><!-- /.lightbox-body -->
\ No newline at end of file