Follow-on updates from @jennyhaines

openshift#2362 (comment)

app/styles/_kve.less

@@ -192,6 +192,12 @@
   margin-bottom: 0;
   padding-right: 5px;
   width: 50%;
+  &.prefix-header {
+    display: none;
+    @media(min-width: @screen-xs-min) {
+      display: block;
+    }
+  }
 }
 
 .key-value-editor-entry-header,

app/styles/_tooltip.less

@@ -2,6 +2,10 @@
 // Tooltips
 // --------------------------------------------------
 
+.tooltip-default-icon {
+  font-size: @font-size-base - 1;
+  vertical-align: top;
+}
 .tooltip-inner {
   .word-break(); // so that long, unbroken strings don't overflow
 }

app/views/directives/edit-environment-from.html

@@ -2,20 +2,17 @@
   <div
     ng-if="$ctrl.showHeader"
     class="environment-from-entry environment-from-editor-entry-header">
-    <div class="form-group environment-from-editor-header value-header">
-      <div class="input-group">
+    <div class="form-group environment-from-editor-header config-map-header">
         Config Map/Secret
-      </div>
     </div>
-    <div class="form-group environment-from-editor-header value-header">
-      <div class="input-group"
-           ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
+    <div
+      class="form-group environment-from-editor-header prefix-header"
+      ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
         Prefix
-        <small class="pficon pficon-help"
+        <small class="pficon pficon-help tooltip-default-icon"
                aria-hidden="true"
                data-toggle="tooltip"
-               data-original-title="Optional prefix added to each environment variable name."></small>
-      </div>
+               data-original-title="Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."></small>
     </div>
   </div>
 
@@ -79,15 +76,6 @@
             <span class="help-block key-validation-error"
                   ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
               <span class="validation-text">Please enter a valid prefix.</span>
-              <span class="help action-inline">
-                <a
-                  aria-hidden="true"
-                  data-toggle="tooltip"
-                  data-placement="top"
-                  data-original-title="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.">
-                  <span class="pficon pficon-help"></span>
-                </a>
-              </span>
             </span>
           </span>
         </div>

app/views/directives/edit-environment-variables.html

@@ -1,7 +1,7 @@
 <form ng-if="$ctrl.apiObject" name="$ctrl.form" class="mar-bottom-xl">
   <confirm-on-exit ng-if="$ctrl.canIUpdate && !$ctrl.ngReadonly" dirty="$ctrl.form.$dirty"></confirm-on-exit>
   <div ng-repeat="container in $ctrl.containers">
-    <h3>Container {{container.name}}</h3>
+    <h2>Container {{container.name}}</h2>
 
     <div ng-if="!$ctrl.canIUpdate || $ctrl.ngReadonly">
       <span ng-if="!container.env.length">
@@ -34,13 +34,13 @@ <h3>Container {{container.name}}</h3>
       show-header>
     </key-value-editor>
 
-    <h4 class="section-label">
+    <h3>
       Environment From
-      <span class="pficon pficon-help"
+      <span class="pficon pficon-help tooltip-default-icon"
             aria-hidden="true"
             data-toggle="tooltip"
             data-original-title="Environment From lets you add all key-value pairs from a config map or secret as environment variables."></span>
-    </h4>
+    </h3>
     <edit-environment-from
       entries="container.envFrom"
       env-from-selector-options="$ctrl.valueFromObjects"

app/views/directives/key-value-editor.html

@@ -4,14 +4,10 @@
     ng-if="showHeader"
     class="key-value-editor-entry key-value-editor-entry-header">
     <div class="form-group key-value-editor-header key-header">
-      <div class="input-group">
-        <span class="help-block">{{keyPlaceholder}}</span>
-      </div>
+      {{keyPlaceholder}}
     </div>
     <div class="form-group key-value-editor-header value-header">
-      <div class="input-group">
-        <span class="help-block">{{valuePlaceholder}}</span>
-      </div>
+      {{valuePlaceholder}}
     </div>
   </div>
 

dist/scripts/templates.js

@@ -6698,16 +6698,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   $templateCache.put('views/directives/edit-environment-from.html',
     "<ng-form name=\"$ctrl.editEnvironmentFromForm\" novalidate>\n" +
     "<div ng-if=\"$ctrl.showHeader\" class=\"environment-from-entry environment-from-editor-entry-header\">\n" +
-    "<div class=\"form-group environment-from-editor-header value-header\">\n" +
-    "<div class=\"input-group\">\n" +
+    "<div class=\"form-group environment-from-editor-header config-map-header\">\n" +
     "Config Map/Secret\n" +
     "</div>\n" +
-    "</div>\n" +
-    "<div class=\"form-group environment-from-editor-header value-header\">\n" +
-    "<div class=\"input-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
+    "<div class=\"form-group environment-from-editor-header prefix-header\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
     "Prefix\n" +
-    "<small class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name.\"></small>\n" +
-    "</div>\n" +
+    "<small class=\"pficon pficon-help tooltip-default-icon\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\"></small>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div ng-model=\"$ctrl.entries\" class=\"environment-from-editor\" as-sortable=\"$ctrl.dragControlListeners\">\n" +
@@ -6747,11 +6743,6 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" +
     "<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" +
     "<span class=\"validation-text\">Please enter a valid prefix.</span>\n" +
-    "<span class=\"help action-inline\">\n" +
-    "<a aria-hidden=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" data-original-title=\"A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\">\n" +
-    "<span class=\"pficon pficon-help\"></span>\n" +
-    "</a>\n" +
-    "</span>\n" +
     "</span>\n" +
     "</span>\n" +
     "</div>\n" +
@@ -6815,7 +6806,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<form ng-if=\"$ctrl.apiObject\" name=\"$ctrl.form\" class=\"mar-bottom-xl\">\n" +
     "<confirm-on-exit ng-if=\"$ctrl.canIUpdate && !$ctrl.ngReadonly\" dirty=\"$ctrl.form.$dirty\"></confirm-on-exit>\n" +
     "<div ng-repeat=\"container in $ctrl.containers\">\n" +
-    "<h3>Container {{container.name}}</h3>\n" +
+    "<h2>Container {{container.name}}</h2>\n" +
     "<div ng-if=\"!$ctrl.canIUpdate || $ctrl.ngReadonly\">\n" +
     "<span ng-if=\"!container.env.length\">\n" +
     "No environment variables set in the {{$ctrl.apiObject.kind | humanizeKind}} template for container {{container.name}}.\n" +
@@ -6825,10 +6816,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<key-value-editor ng-if=\"$ctrl.canIUpdate && !$ctrl.ngReadonly\" entries=\"container.env\" key-placeholder=\"Name\" value-placeholder=\"Value\" value-from-selector-options=\"$ctrl.valueFromObjects\" key-validator=\"[A-Za-z_][A-Za-z0-9_]*\" key-validator-error=\"Please enter a valid key.\" key-validator-error-tooltip=\"A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\" add-row-link=\"Add Value\" add-row-with-selectors-link=\"Add Value from Config Map or Secret\" show-header>\n" +
     "</key-value-editor>\n" +
-    "<h4 class=\"section-label\">\n" +
+    "<h3>\n" +
     "Environment From\n" +
-    "<span class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
-    "</h4>\n" +
+    "<span class=\"pficon pficon-help tooltip-default-icon\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
+    "</h3>\n" +
     "<edit-environment-from entries=\"container.envFrom\" env-from-selector-options=\"$ctrl.valueFromObjects\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
     "</edit-environment-from>\n" +
     "</div>\n" +
@@ -7433,14 +7424,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<ng-form name=\"forms.keyValueEditor\" novalidate ng-if=\"entries\">\n" +
     "<div ng-if=\"showHeader\" class=\"key-value-editor-entry key-value-editor-entry-header\">\n" +
     "<div class=\"form-group key-value-editor-header key-header\">\n" +
-    "<div class=\"input-group\">\n" +
-    "<span class=\"help-block\">{{keyPlaceholder}}</span>\n" +
-    "</div>\n" +
+    "{{keyPlaceholder}}\n" +
     "</div>\n" +
     "<div class=\"form-group key-value-editor-header value-header\">\n" +
-    "<div class=\"input-group\">\n" +
-    "<span class=\"help-block\">{{valuePlaceholder}}</span>\n" +
-    "</div>\n" +
+    "{{valuePlaceholder}}\n" +
     "</div>\n" +
     "</div>\n" +
     "<div ng-model=\"entries\" class=\"key-value-editor\" as-sortable=\"dragControlListeners\">\n" +