Font-size bump for tablets and phones on the outfitting screen. Seems to make life a bit easier. Also added a small-tablet size option which will fix a tiny visual bug on the outfitting screen with long ship names. Fixed a few other minor visual bugs. Also made clickable menu items bigger on tablets and phones.

app/less/header.less

@@ -79,6 +79,15 @@ header {
     -webkit-overflow-scrolling: touch;
     max-height: 400px;
 
+    .tablet({
+      font-size: 1.1em;
+      max-height: 800px;
+
+      a {
+        padding: 0.3em 0;
+      }
+    });
+
     &.dbl {
       -webkit-column-count: 2; /* Chrome, Safari, Opera */
       -moz-column-count: 2; /* Firefox */

app/less/outfit.less

@@ -7,6 +7,8 @@
 
   .tablet({
     width: 100%;
+    font-size: 1.2em;
+    max-width: 1600px;
   });
 
   &>.list {
@@ -21,6 +23,10 @@
 }
 
 #overview {
+  .tablet({
+      font-size: 0.9em;
+  });
+
   h1 {
     margin: 0;
     float: left;
@@ -31,7 +37,8 @@
 #summary {
   overflow-x: auto;
   width: 100%;
-  margin: 1em 0 2em 0;
+  margin: 1em 0 1em 0;
+  padding-bottom: 1em;
   
   #summaryTable {
     .user-select-none();
@@ -87,7 +94,7 @@
 .outfit-button-label {
   margin-left: 0.5em;
 
-  .largePhone({
+  .smallTablet({
     display: none;
   });
 }

app/less/responsive.less

@@ -21,6 +21,13 @@
   }
 }
 
+.smallTablet(@rules) {
+  @media only screen and /*(min-width: 641px) and */(max-width: 820px) {
+    @rules();
+  }
+}
+
+
 .tablet(@rules) {
   @media only screen and /*(min-width: 601px) and */(max-width: 1024px) {
     @rules();

app/views/page-outfit.html

@@ -180,7 +180,7 @@
     </div>
   </div>
 
-  <div id="internal" class="slot-group r">
+  <div id="internal" class="slot-group l">
     <h1>Internal Compartments</h1>
     <div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" ng-class="{selected: selectedSlot==i}">
       <div slot-internal class="details" slot="i" lbl="igMap[i.c.grp]" ft="ft"></div>