UI Tweaks

app/js/directives/directive-component-select.js

@@ -24,7 +24,7 @@ angular.module('app').directive('componentSelect', function() {
         list.push('<svg cpid="', id, '" class="icon lg"><use cpid="', id, '" xlink:href="#mount-', o.mode, '"></use></svg> ');
       }
 
-      list.push(o.class, o.rating);
+      list.push('<span>', o.class, o.rating);
 
       if (o.missile) {
         list.push('/' + o.missile);
@@ -35,7 +35,7 @@ angular.module('app').directive('componentSelect', function() {
         list.push(' ' + o.name);
       }
 
-      list.push('</li>');
+      list.push('</span></li>');
       prevClass = o.class;
       prevRating = o.rating;
     }

app/less/outfit.less

@@ -148,11 +148,6 @@ table.total {
   .user-select-none();
   cursor: default;
 
-  [ng-click] {
-    cursor: pointer;
-  }
-
-
   h1 {
     font-family: @fStandard;
     color: @bgBlack;

app/less/select.less

@@ -29,16 +29,19 @@ select {
   padding: 0.5em 0;
   width: 100%;
   margin: 0;
-  max-height: 300px;
+  max-height: 500px;
   overflow-y: auto;
   overflow-x: hidden;
   z-index: 0;
   -webkit-overflow-scrolling: touch;
   background-color: @bg;
   border: 1px solid @primary;
-  white-space: nowrap;
   text-align: center;
 
+  .tablet({
+    max-height: 300px;
+  });
+
   &::-webkit-scrollbar {
     width: 0.5em;
   }
@@ -53,6 +56,7 @@ select {
   }
 
   .select-group {
+    white-space: nowrap;
     line-height: 1.5em;
     text-align: left;
     margin: 0.5em 0;
@@ -61,11 +65,15 @@ select {
     border-bottom: 1px solid @primary-disabled;
   }
 
-  .empty-c, .c, .lc {
-    cursor: pointer;
+  @optionSpacing: 2em;
 
+  .empty-c, .c, .lc {
+    white-space: nowrap;
+    text-align: center;
+    cursor: pointer;
+    line-height:@optionSpacing;
     color: @primary-disabled;
-    stroke-width: 1em;
+    stroke-width: 5px;
     stroke: @primary-disabled;
 
     &:hover {
@@ -83,27 +91,10 @@ select {
     }
   }
 
-  @optionSpacing: 2em;
-
-  .lc {
-    line-height:@optionSpacing;
-    text-align: left;
-  }
-
-  .empty-c {
-    line-height:@optionSpacing;
-    text-align: center;
-  }
-
-
-  .c {
+  .lc, .c {
     border:1px solid @primary-disabled;
-    display: inline-block;
-    padding: 0.1em;
+    padding: 0.1em 0.2em;
     margin: 0.3em;
-    width: 2em;
-    line-height: @optionSpacing;
-    text-align: center;
 
     &:hover {
       border:1px solid @warning;
@@ -117,10 +108,19 @@ select {
     }
   }
 
+  .c {
+    display: inline-block;
+    width: 2em;
+  }
+
+  span {
+    vertical-align: middle;
+  }
+
   ul {
     display: inline-block;
     text-align: left;
-    min-width: 15em;
+    min-width: 16em;
     margin: 0 auto;
     padding: 0;
     list-style: none;
@@ -128,7 +128,7 @@ select {
 
   &.hardpoint {
     .c {
-      width: 4.4em;
+      width: 4.5em;
       padding: 0.1em 0.2em;
     }
     ul {

app/less/table.less

@@ -8,6 +8,10 @@ table {
     color: @primary;
     text-decoration: none;
   }
+
+  [ng-click] {
+    cursor: pointer;
+  }
 }
 
 thead {