[#1654] Scroll content in overlay rather than header and content

Author: catarak

client/styles/components/_keyboard-shortcuts.scss

@@ -2,6 +2,7 @@
   padding: #{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/_overlay.scss

@@ -25,7 +25,6 @@
   max-height: 80%;
   max-width: 65%;
   position: relative;
-  overflow-y: scroll;
 }
 
 .overlay__header {

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 {