Adds '?' to shortcuts

- Fixes '?' after using the terminal
- Fixes <kbd> styling, border-radius was behaving strangley w/ transform
  to center the overlay, so opted for more old school methods.

client/app/scripts/components/help-panel.js

@@ -1,12 +1,13 @@
 import React from 'react';
 
 const GENERAL_SHORTCUTS = [
-  {key: 'esc', label: 'Close panel'},
+  {key: 'esc', label: 'Close active panel'},
+  {key: '?', label: 'Toggle shortcut menu'},
 ];
 
 const CANVAS_METRIC_SHORTCUTS = [
-  {key: '<', label: 'Pin previous metric'},
-  {key: '>', label: 'Pin next metric'},
+  {key: '<', label: 'Select and pin previous metric'},
+  {key: '>', label: 'Select and pin next metric'},
   {key: 'q', label: 'Unpin current metric'},
 ];
 

client/app/scripts/components/terminal.js

@@ -175,6 +175,7 @@ export default class Terminal extends React.Component {
 
     if (this.term) {
       log('destroy terminal');
+      this.term.blur();
       this.term.destroy();
       this.term = null;
     }

client/app/styles/main.less

@@ -1084,12 +1084,19 @@ h2 {
 // Help panel!
 //
 
+@help-panel-width: 400px;
+@help-panel-height: 380px;
 .help-panel {
   position: absolute;
+  -webkit-transform: translate3d(0, 0, 0);
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  width: @help-panel-width;
+  height: @help-panel-height;
+  margin-left: @help-panel-width / -2;
+  margin-top: @help-panel-height / -2;
   z-index: 2048;
+  background-color: white;
   .shadow-2;
 
   &-header {
@@ -1104,7 +1111,6 @@ h2 {
 
   &-main {
     padding: 12px 36px 36px;
-    background-color: white;
   }
 
   h3 {