Fix brittle layout for "Keyboard shortcuts" help.

Adding one row to the Navigation table made the
Keyboard shortcuts dialog look ridiculous, and it
was caused by a design based around float-left-ing
that broke down when the size of the "Navigation" box
was bigger than the "Composing messages" box.

Now we use a div to enclose the top two boxes in
the modal.

(imported from commit 90288ec288d4cf3d50ed7f5bcb48c8bb3d033f19)

static/styles/zulip.css

@@ -2105,10 +2105,15 @@ div.floating_recipient {
 }
 
 .hotkeys_table {
-    float: left;
     width: 245px;
     margin-right: 10px;
     font-size: 90%;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.hotkeys_table th {
+    width: 245px;
 }
 
 .hotkeys_table .hotkey {

templates/zerver/keyboard_shortcuts.html

@@ -5,6 +5,7 @@
     <h3 id="keyboard-shortcuts-label">Keyboard shortcuts</h3>
   </div>
   <div class="modal-body">
+    <div>
       <table class="hotkeys_table table table-striped table-bordered table-condensed">
         <thead>
           <tr>
@@ -72,7 +73,9 @@
           <td class="definition">Cancel compose</td>
         </tr>
       </table>
+    </div>
 
+    <div>
       <table class="hotkeys_table table table-striped table-bordered table-condensed">
         <thead>
           <tr>
@@ -117,6 +120,7 @@
         </tr>
       </table>
     </div>
+  </div>
   <div class="modal-footer">
     <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
   </div>