Bug 1421107 - Stop perf tab wrapping at narrower widths

ui/css/treeherder-info-panel.css

@@ -108,6 +108,11 @@ div#info-panel .info-panel-navbar > ul.tab-headers > li {
   min-width: 550px;
 }
 
+.perf-job-selected {
+  /* An override to optimize all other non-perf jobs at 550px */
+  min-width: 646px !important;
+}
+
 .info-panel-navbar-controls {
   flex-wrap: nowrap;
 }

ui/plugins/pluginpanel.html

@@ -150,7 +150,8 @@
   <div id="job-tabs-panel">
     <div id="job-tabs-navbar">
       <nav class="info-panel-navbar info-panel-navbar-tabs">
-        <ul class="nav navbar-nav tab-headers">
+        <ul class="nav navbar-nav tab-headers"
+            ng-class="{'perf-job-selected': tabService.tabs.perfDetails.enabled}">
           <li ng-repeat="tabName in tabService.tabOrder"
               ng-if="tabService.tabs[tabName].enabled"
               ng-class="{'active': tabService.selectedTab == tabName}">