On Job Events page, Event and Host columns now have a min-width css setting to help prevent 'jump' when collapsing/expanding children. Fixes the jump, but sort of wrecks the TB's responsive layout on small screens. May have to circle back and add media query at some point.

ansibleworks/ui/static/css/ansible-ui.css

@@ -449,4 +449,8 @@
 
  #event_display-header {
     min-width: 250px;
+ }
+
+ #job-event-host-header {
+    min-width: 200px;
  }

ansibleworks/ui/static/js/lists/JobEvents.js

@@ -33,10 +33,9 @@ angular.module('JobEventsListDefinition', [])
                 label: 'Host',
                 ngClick: "viewHost(\{\{ jobevent.host \}\})",
                 ngBind: 'jobevent.summary_fields.host.name',
-                sourceModel: 'host',
-                sourceField: 'name',
                 searchField: 'hosts__name',
-                nosort: true
+                nosort: true,
+                id: 'job-event-host-header'
                 },
             status: {
                 label: 'Status',

ansibleworks/ui/static/lib/ansible/list-generator.js

@@ -153,7 +153,9 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
           html += "<th>#</th>\n";
        }
        for (var fld in list.fields) {
-           html += "<th class=\"list-header\" id=\"" + fld + "-header\" ";
+           html += "<th class=\"list-header\" id=\""; 
+           html += (list.fields[fld].id) ? list.fields[fld].id : fld + "-header";
+           html += "\"";
            html += (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) ? "ng-click=\"sort('" + fld + "')\"" : "";
            html += ">" + list.fields[fld].label;
            if (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) {