2 files changed, 16 insertions, 7 deletions
diff --git a/ext/client.css b/ext/client.css
index c8f58a37..7691e7a9 100644
--- a/ext/client.css
+++ b/ext/client.css
@@ -20,12 +20,14 @@
     background-color: #fff;
     border:           1px solid #999;
     box-shadow:       0 0 10px rgba(0, 0, 0, .5);
-    max-width:        50em;
+    color:            #000;
+    max-height:       25em;
+    max-width:        30em;
+    overflow-y:       scroll;
     padding:          10px;
-    pointer-events:   none;
     position:         fixed;
-    width:            auto;
-    z-index:          64;
+    visibility:       hidden;
+    z-index:          256;
 }
 
 .yomichan-def-expression {
diff --git a/ext/client.js b/ext/client.js
index 95308eec..74b246f3 100644
--- a/ext/client.js
+++ b/ext/client.js
@@ -23,16 +23,23 @@ class Client {
         this.popupOffset = 10;
         this.enabled     = false;
 
-        $('body').append(this.popup);
+        $('body').append(this.popup).click(() => this.hidePopup());
 
         chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
         window.addEventListener('mousemove', this.onMouseMove.bind(this));
+        window.addEventListener('keydown', this.onKeyDown.bind(this));
 
         getState((state) => this.setEnabled(state === 'enabled'));
     }
 
+    onKeyDown(e) {
+        if (e.keyCode === 16 || e.charCode === 16) {
+            this.hidePopup();
+        }
+    }
+
     onMouseMove(e) {
-        if (!this.enabled || !e.shiftKey) {
+        if (!this.enabled || (!e.shiftKey && e.which !== 2)) {
             return;
         }
 
@@ -53,7 +60,7 @@ class Client {
                 this.hidePopup();
             } else {
                 range.setEnd(range.endContainer, range.startOffset + length);
-                renderTemplate({defs: results.slice(0, 5)}, 'defs.html', (html) => {
+                renderTemplate({defs: results}, 'defs.html', (html) => {
                     this.popup.html(html);
                     this.showPopup(range);
                 });