Merge pull request #1655 from sagar-joshi/bug/keyboard-shortcuts-overflow

Fixes overflow problem in overlays

Author: catarak

client/styles/components/_keyboard-shortcuts.scss

@@ -1,7 +1,9 @@
 .keyboard-shortcuts {
   padding: #{20 / $base-font-size}rem;
+  margin-right: #{20 / $base-font-size}rem;
   padding-bottom: #{40 / $base-font-size}rem;
   width: #{450 / $base-font-size}rem;
+  overflow-y: scroll;
 }
 
 .keyboard-shortcuts-note {

client/styles/components/_preferences.scss

@@ -2,14 +2,23 @@
   width: 100%;
   width: #{640 / $base-font-size}rem;
   max-width: 100%;
-  min-height: #{460 / $base-font-size}rem;
   max-height: 100%;
   z-index: 9999;
   padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 /
     $base-font-size}rem;
   display: flex;
   flex-direction: column;
   outline: none;
+  height: calc(80vh - #{65 / $base-font-size}rem);
+  max-height: #{460 / $base-font-size}rem;
+  & .react-tabs {
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  & .react-tabs__tab-panel {
+    overflow-y: scroll;
+  }
 }
 
 .preferences__exit-button {