Update the heights of a few dialogs to be larger then the default max…

…-height (#2863)

Fixes #2859
Fixes #2861

There had been a max-height set for the default of all dialogs used. This turned out to be too small for a few dialogs.
This increases the height for the Keybindings, Settings, About, and Collaborate dialogs to better fit.

RELEASE-NOTES.md

@@ -16,7 +16,7 @@
 - Fixed displaying extra blank spaces in history screen [#2829](https://github.com/automattic/simplenote-electron/pull/2829), [#2867](https://github.com/automattic/simplenote-electron/pull/2867)
 - Fixed to apply selected tag to a new note by default [#2556](https://github.com/automattic/simplenote-electron/pull/2556)
 - Fixed spacing on unsynced notes warning message [#2797](https://github.com/automattic/simplenote-electron/pull/2797)
-- Fixed cut off issue for dialogs when the window is too small [#2815](https://github.com/automattic/simplenote-electron/pull/2815), [#2834](https://github.com/automattic/simplenote-electron/pull/2834)
+- Fixed cut off issue for dialogs when the window is too small [#2815](https://github.com/automattic/simplenote-electron/pull/2815), [#2834](https://github.com/automattic/simplenote-electron/pull/2834), [#2863](https://github.com/automattic/simplenote-electron/pull/2863)
 - Fixed unnecessary separators in the Electron builds File and Edit menus when not yet logged in (props @Klauswk) [#2724](https://github.com/automattic/simplenote-electron/pull/2724)
 
 ## [v2.9.0]

lib/components/tab-panels/style.scss

@@ -35,6 +35,7 @@
 }
 
 .tab-panels__panel {
+  height: 30.5em;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }

lib/dialogs/about/style.scss

@@ -2,6 +2,7 @@
   .dialog {
     position: relative;
     max-width: 472px;
+    max-height: calc(100vh - 2rem);
 
     // For overriding theme settings.
     // TODO: Improve theme management so this isn't necessary
@@ -15,6 +16,7 @@
 
   .dialog-content {
     padding: 30px 20px 20px;
+    max-height: calc(100vh - 2rem - 70px);
   }
 
   a {

lib/dialogs/keybindings/style.scss

@@ -2,10 +2,12 @@
   .dialog {
     max-width: 500px;
     margin: auto;
+    max-height: calc(100vh - 2rem);
   }
 
   .dialog-content {
     padding: 10px 20px 20px;
+    max-height: calc(100vh - 2rem - 56px);
   }
 
   ul {

lib/dialogs/settings/style.scss

@@ -1,6 +1,14 @@
 .settings {
   max-width: 630px;
 
+  &.dialog {
+    max-height: calc(100vh - 2rem);
+
+    .dialog-content {
+      max-height: calc(100vh - 2rem - 56px);
+    }
+  }
+
   input[type='radio'] {
     cursor: pointer;
   }