From dc126e1b582d175293dbe911c3e4e8494571d730 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Tue, 12 Dec 2017 09:04:58 -0500
Subject: [PATCH] Popup overflow (#302)

---
 popup.html       |  6 +++---
 popup/hotkeys.js | 19 ++-----------------
 popup/popup.css  |  4 ++++
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/popup.html b/popup.html
index c379e317..6d403b61 100644
--- a/popup.html
+++ b/popup.html
@@ -176,9 +176,9 @@
     </div>
   </div>
 
-  <aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
-
-  <div id="installed"></div>
+  <div id="installed">
+    <aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
+  </div>
 
   <div class="actions">
     <div id="disable-all-wrapper">
diff --git a/popup/hotkeys.js b/popup/hotkeys.js
index b6abc2d1..fc37a78f 100644
--- a/popup/hotkeys.js
+++ b/popup/hotkeys.js
@@ -160,10 +160,9 @@ var hotkeys = (() => {
       if (!container.firstElementChild) {
         buildElement();
       }
-      const height = 4 +
+      const height = 3 +
         container.firstElementChild.scrollHeight +
-        container.lastElementChild.scrollHeight +
-        parseFloat(getComputedStyle(container.lastElementChild).paddingBottom);
+        container.lastElementChild.scrollHeight;
       if (height > document.body.clientHeight) {
         document.body.style.height = height + 'px';
       }
@@ -203,19 +202,5 @@ var hotkeys = (() => {
       debounce(adjustInfoPosition, 100, true);
       return;
     }
-    const style = $('#hotkey-info').style;
-    const scroller = document.scrollingElement;
-    if (installed.scrollHeight > installed.clientHeight ||
-        scroller.scrollHeight > scroller.innerHeight) {
-      const entryRight = installed.firstElementChild.getBoundingClientRect().right;
-      const right = window.innerWidth - entryRight;
-      if (parseFloat(style.right) !== right) {
-        style.setProperty('right', right + 'px', 'important');
-      }
-    }
-    const bottom = installed.getBoundingClientRect().bottom + window.scrollY;
-    if (parseFloat(style.height) !== bottom) {
-      style.setProperty('height', bottom + 'px', 'important');
-    }
   }
 })();
diff --git a/popup/popup.css b/popup/popup.css
index 38f6675d..cce0d50e 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -9,6 +9,7 @@
 
 html, body {
   height: min-content;
+  max-height: 600px;
 }
 
 body {
@@ -144,6 +145,7 @@ body.blocked > DIV {
   max-height: 445px;
   overflow-y: auto;
   counter-reset: style-number;
+  position: relative;
 }
 
 #installed.disabled .style-name {
@@ -555,7 +557,9 @@ body.blocked .actions > .main-controls {
 }
 
 #hotkey-info[data-active] {
+  position: fixed;
   left: 6ex;
+  bottom: unset;
   width: auto;
   cursor: auto;
   display: flex;