Tablet modal and comparison layout fixes

app/less/comparison.less

@@ -78,14 +78,24 @@
   clear: both;
   margin: 1em 0 0;
   height: 8.5em;
+  white-space: nowrap;
   overflow:hidden;
 
   h1 {
+    display: inline-block;
     margin: 0 0.7em;
+    vertical-align: top;
   }
 
   table {
+    display: inline-block;
     width: 20em;
+    vertical-align: top;
+
+    thead {
+      display: block;
+      text-align: center;
+    }
 
     tbody {
       display: block;

app/less/modal.less

@@ -16,7 +16,6 @@
   left:50%; top:50%;
   transform:translate(-50%,-50%);
   -webkit-transform:translate(-50%,-50%);
-
   max-width: 75%;
   padding: 3em;
   background-color: @bgBlack;
@@ -30,6 +29,7 @@
     margin: 0;
   }
   p {
+    min-width: 30em;
     text-align: justify;
   }
 }

app/views/page-comparison.html

@@ -45,7 +45,7 @@
   <div class="modal" ui-view="modal-content" ng-click="$event.stopPropagation()">
     <h3>Select Builds to Compare</h3>
     <div id="build-select">
-      <table class="l">
+      <table>
         <thead><tr><th colspan="2">Available</th></tr></thead>
         <tbody>
           <tr ng-repeat="b in unusedBuilds | orderBy:'[0]'" ng-click="addBuild(b.id, b.buildName)">
@@ -53,8 +53,8 @@
           </tr>
         </tbody>
       </table>
-      <h1 class="l">⇆</h1>
-      <table class="l">
+      <h1>⇆</h1>
+      <table>
         <tbody>
           <thead><tr><th colspan="2">Added</th></tr></thead>
           <tr ng-repeat="b in builds | orderBy:'name'" ng-click="removeBuild(b.id, b.buildName)">