use ng-class in copy-to-clipboard directive

Author: juanvallejo

app/styles/_core.less

@@ -1205,7 +1205,7 @@ h1 small.meta, .build-config-summary .meta {
 }
 
 // don't allow copy-to-clipboard .input-groups get bigger than 600px so Github webhook secrets aren't revealed within the input-group
-copy-to-clipboard .input-group {
+copy-to-clipboard .input-group.limit-width {
   max-width: 300px;
 }
 

app/views/directives/_copy-to-clipboard.html

@@ -1,4 +1,4 @@
-<div class="input-group copy-to-clipboard" style="{{displayWide ? 'max-width:100%;' : ''}}">
+<div class="input-group copy-to-clipboard" ng-class="{'limit-width': !displayWide}">
   <input id="{{id}}" type="text" class="form-control" value="{{inputText ? inputText : clipboardText}}" ng-disabled="isDisabled" ng-readonly="!isDisabled" select-on-focus>
   <span class="input-group-btn" ng-hide="hidden">
     <a ng-show="!inputText" data-clipboard-target="#{{id}}"

dist/scripts/templates.js

@@ -4837,7 +4837,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
   $templateCache.put('views/directives/_copy-to-clipboard.html',
-    "<div class=\"input-group copy-to-clipboard\" style=\"{{displayWide ? 'max-width:100%;' : ''}}\">\n" +
+    "<div class=\"input-group copy-to-clipboard\" ng-class=\"{'limit-width': !displayWide}\">\n" +
     "<input id=\"{{id}}\" type=\"text\" class=\"form-control\" value=\"{{inputText ? inputText : clipboardText}}\" ng-disabled=\"isDisabled\" ng-readonly=\"!isDisabled\" select-on-focus>\n" +
     "<span class=\"input-group-btn\" ng-hide=\"hidden\">\n" +
     "<a ng-show=\"!inputText\" data-clipboard-target=\"#{{id}}\" ng-disabled=\"isDisabled\" data-toggle=\"tooltip\" title=\"Copy to clipboard\" role=\"button\" class=\"btn btn-default\"><i class=\"fa fa-clipboard\"/></a>\n" +

dist/styles/main.css

@@ -3995,7 +3995,7 @@ labels+.resource-details{margin-top:10px}
 .environment-variables.table.table-bordered>tbody>tr>td:last-child .env-var-value a{font-family:"Open Sans",Helvetica,Arial,sans-serif}
 .pretty-json{font-family:Menlo,Monaco,Consolas,monospace;white-space:pre-wrap}
 .info-popover,.warnings-popover{cursor:help;vertical-align:middle;margin-left:2px}
-copy-to-clipboard .input-group{max-width:300px}
+copy-to-clipboard .input-group.limit-width{max-width:300px}
 .strong{font-weight:700}
 .tech-preview-header{justify-content:space-between}
 @media (max-width:479px){.col-xxs-12{width:100%}