Toggle link positioning for truncation directive

Fixes openshift#1277

Author: sg00dwin

app/styles/_core.less

@@ -1286,3 +1286,8 @@ copy-to-clipboard .input-group.limit-width {
     width: 100%;
   }
 }
+
+.truncated-content-toggle-link {
+  margin-left: 5px;
+  white-space: nowrap;
+}

app/views/directives/truncate-long-text.html

@@ -4,15 +4,15 @@
     <span ng-attr-title="{{content}}">
       <span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;
     </span>
-    <a ng-if="expandable" href="" ng-click="toggles.expanded = true" style="margin-left: 5px; white-space: nowrap;">See all</a>
+    <a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="truncated-content-toggle-link">See all</a>
   </span>
   <span ng-if="toggles.expanded">
     <div ng-if="prettifyJson" class="well">
-      <span class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false">Collapse</a></span>
+      <span class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false" class="truncated-content-toggle-link">Collapse</a></span>
       <span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>
     </div>
     <span ng-if="!prettifyJson">
-      <span class="pull-right"><a href="" ng-click="toggles.expanded = false">Collapse</a></span>
+      <span class="pull-right"><a href="" ng-click="toggles.expanded = false" class="truncated-content-toggle-link">Collapse</a></span>
       <span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>
     </span>
   </span>

dist/scripts/templates.js

@@ -8948,15 +8948,15 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-attr-title=\"{{content}}\">\n" +
     "<span ng-bind-html=\"truncatedContent | highlightKeywords : keywords\" class=\"truncated-content\"></span>&hellip;\n" +
     "</span>\n" +
-    "<a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" style=\"margin-left: 5px; white-space: nowrap\">See all</a>\n" +
+    "<a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncated-content-toggle-link\">See all</a>\n" +
     "</span>\n" +
     "<span ng-if=\"toggles.expanded\">\n" +
     "<div ng-if=\"prettifyJson\" class=\"well\">\n" +
-    "<span class=\"pull-right\" style=\"margin-top: -10px\"><a href=\"\" ng-click=\"toggles.expanded = false\">Collapse</a></span>\n" +
+    "<span class=\"pull-right\" style=\"margin-top: -10px\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncated-content-toggle-link\">Collapse</a></span>\n" +
     "<span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
     "</div>\n" +
     "<span ng-if=\"!prettifyJson\">\n" +
-    "<span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\">Collapse</a></span>\n" +
+    "<span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncated-content-toggle-link\">Collapse</a></span>\n" +
     "<span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
     "</span>\n" +
     "</span>\n" +

dist/styles/main.css

@@ -4134,6 +4134,7 @@ copy-to-clipboard .input-group.limit-width{max-width:300px}
 .tech-preview-header{justify-content:space-between}
 @media (max-width:479px){.col-xxs-12{width:100%}
 }
+.truncated-content-toggle-link{margin-left:5px;white-space:nowrap}
 .data-toolbar{padding:5px 0}
 .data-toolbar.other-resources-toolbar .data-toolbar-dropdown{min-width:210px}
 .data-toolbar .checkbox{margin-bottom:0;margin-top:10px}