UI & UX improvements

app/less/comparison.less

@@ -104,6 +104,8 @@
       display: block;
       overflow-x: hidden;
       overflow-y: auto;
+      z-index: 0;
+      -webkit-overflow-scrolling: touch;
       max-height: 8em;
     }
   }

app/less/header.less

@@ -51,6 +51,8 @@ header {
     background-color: @bgBlack;
     font-size: 0.8em;
     overflow-y: auto;
+    z-index: 0;
+    -webkit-overflow-scrolling: touch;
     max-height: 400px;
 
     &.dbl {

app/less/list.less

@@ -1,10 +1,11 @@
 .list {
-  overflow: hidden;
+  margin: 1em 0;
   cursor: default;
   font-size: 0.8em;
-  min-width: 21em;
+  min-width: 25%;
   text-align: left;
   .user-select-none();
+  box-sizing: border-box;
 
   .header {
     width: 100%;

app/less/outfit.less

@@ -1,17 +1,15 @@
 
 #outfit {
   font-size: 1.1em;
-
+  max-width: 1200px;
-  // iPads  Landscape
-  .tablet({
-    & {
-      font-size: 0.95em;
-    }
-  });
-
-  width: 64em;
   margin: 0 auto;
   .user-select-none();
+
+  .tablet({
+    min-width: 760px;
+    font-size: 0.8em;
+  });
+
 }
 
 #overview {
@@ -25,7 +23,7 @@
 #summary {
   .user-select-none();
   width: 100%;
-  margin-top: 1em;
+  margin: 1em 0;
   font-size: 0.8em;
   border-collapse: collapse;
 
@@ -56,7 +54,7 @@
 
 
 #hardpoints, #utility, #standard {
-  margin-right: 0.3em;
+  padding-right: 0.3em;
   .slot {
     clear: left;
   }

app/less/select.less

@@ -8,6 +8,8 @@
   max-height: 300px;
   overflow-y: auto;
   overflow-x: hidden;
+  z-index: 0;
+  -webkit-overflow-scrolling: touch;
   background-color: @bg;
   border: 1px solid @primary;
   white-space: nowrap;

app/less/slot.less

@@ -1,6 +1,8 @@
 
 .slot-group {
-  margin: 1em 0;
+  width: 25%;
+  margin: 0;
+  box-sizing: border-box;
   .user-select-none();
   cursor: default;
 
@@ -19,7 +21,7 @@
 .slot {
   float: left;
   text-align: left;
-  width: 21em;
+  width: 100%;
   font-size: 0.75em;
   margin-top: 0.5em;
   position: relative;

app/views/page-outfit.html

@@ -216,7 +216,7 @@
     </table>
   </div>
 
-  <div class="list l" style="width: 37em; margin: 0 0.5em;">
+  <div class="list l" style="width: 50%;padding: 0 0.5em;">
     <div class="header">Jump Range</div>
     <div class="cen">
       <div class="chart" area-chart config="jrChart" series="jrSeries"></div>