Main menu bar "Ships, Builds, Compare", et all is now responsive and should work on regular sized and tiny screens alike now.

app/less/header.less

@@ -56,6 +56,18 @@ header {
     &.selected {
         background-color: @bgBlack;
     }
+
+    .menu-item-label {
+        @media screen and (min-width: 541px) {
+            margin-left: 1em;
+        }
+        @media screen and (max-width: 540px) {
+            margin-left: 0.5em;
+        }
+        @media screen and (max-width: 520px) {
+            display: none;
+        }
+    }
   }
 
   .menu-list {

app/views/_header.html

@@ -7,8 +7,8 @@
 
   <div class="l menu">
     <div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">
-      <svg class="icon warning"><use xlink:href="#rocket"></use></svg> Ships
-    </div>
+      <svg class="icon warning"><use xlink:href="#rocket"></use></svg><span class="menu-item-label"> Ships</span>
+</div>
     <div class="menu-list no-wrap" ng-if="openedMenu=='s'">
       <a class="block" ng-repeat="(shipId,ship) in ships" ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:null, bn:null})">{{::ship.properties.name}}</a>
     </div>
@@ -16,7 +16,7 @@
 
   <div class="l menu">
     <div class="menu-header" ng-class="{selected: openedMenu=='b', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'b')">
-      <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#hammer"></use></svg> Builds
+      <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#hammer"></use></svg><span class="menu-item-label"> Builds</span>
     </div>
     <div class="menu-list dbl" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
       <ul ng-repeat="shipId in buildsList">
@@ -30,8 +30,8 @@
 
   <div class="l menu">
     <div class="menu-header" ng-class="{selected: openedMenu=='comp', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'comp')">
-      <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#stats-bars"></use></svg> Compare
-    </div>
+      <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#stats-bars"></use></svg><span class="menu-item-label"> Compare</span>
+</div>
     <div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();" style="white-space: nowrap;">
       <span ng-if="!bs.hasComparisons">None Created</span>
       <a ng-repeat="(name, comp) in allComparisons" ui-sref-active="active" class="block name" ui-sref="compare({name:name})" ng-bind="name"></a>

bower.json

@@ -26,7 +26,7 @@
     "d3-tip": "~0.6.7",
     "ng-sortable": "~1.2.1",
     "lz-string": "~1.4.3",
-    "angular": "!~1.4.0"
+    "angular": "~1.4.0"
   },
   "overrides": {
     "angular": {
@@ -50,5 +50,8 @@
     "ng-sortable": {
       "main": "dist/ng-sortable.min.js"
     }
+  },
+  "resolutions": {
+    "angular": "~1.4.0"
   }
 }