From 8b301f91ab43f6ba9134666af3d86267de1235fa Mon Sep 17 00:00:00 2001
From: Jose Ariza <l.jlac001@gmail.com>
Date: Wed, 15 May 2019 09:04:50 -0500
Subject: [PATCH 1/6] #3348 added description to host list

Signed-off-by: Jose Ariza <l.jlac001@gmail.com>
---
 .../inventories-hosts/hosts/hosts.partial.html | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
index 2c1f3b0747..b3639d9f4e 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
+++ b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
@@ -43,9 +43,10 @@
                         <div></div>
                         <div></div>
                         <div class="d-flex h-100">
-                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-4" query-set="host_queryset"></div>
-                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="d-none d-sm-flex col-sm-4 ellipsis" query-set="host_queryset"></div>
-                            <div class="List-tableHeader List-tableHeader--actions actions-column col-lg-4 text-right" translate>Actions</div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-3" query-set="host_queryset"></div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="description" column-iterator="host" column-no-sort="undefined" column-label="Description" column-custom-class="col-lg-3" query-set="host_queryset"></div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="d-none d-sm-flex col-sm-3 ellipsis" query-set="host_queryset"></div>
+                            <div class="List-tableHeader List-tableHeader--actions actions-column col-lg-3 text-right" translate>Actions</div>
                         </div>
                     </div>
                     <div class="List-staticColumnLayout--hosts List-tableRow" ng-repeat="host in hosts track by host.id">
@@ -64,17 +65,22 @@
                                 </div>
                             </div>
                             <div class="d-flex h-100">
-                                <div class="List-tableCell name-column InventoryManage-breakWord col-lg-4">
+                                <div class="List-tableCell name-column InventoryManage-breakWord col-lg-3">
                                     <div class="host-name">
                                         <a ui-sref="hosts.edit({host_id:host.id})">{{host.name }}</a>
                                     </div>
                                 </div>
-                                <div class="List-tableCell inventory_name-column col-lg-4 elllipsis">
+                                <div class="List-tableCell name-column InventoryManage-breakWord col-lg-3">
+                                    <div class="host-name">
+                                        <a ui-sref="hosts.edit({host_id:host.id})">{{host.description }}</a>
+                                    </div>
+                                </div>
+                                <div class="List-tableCell inventory_name-column col-lg-3 elllipsis">
                                     <div class="host-name">
                                         <a href="#/inventories/inventory/{{host.inventory}}">{{host.inventory_name}}</a>
                                     </div>
                                 </div>
-                                <div class="List-actionsContainer col-lg-4">
+                                <div class="List-actionsContainer col-lg-3">
                                     <div class="List-actionButtonCell List-tableCell">
                                         <button id="insights-action" class="List-actionButton " ng-class="{'List-actionButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit.insights')}" data-placement="top" ng-click="goToInsights(host.id)" aw-tool-tip="{{strings.get('inventory.VIEW_INSIGHTS')}}" data-tip-watch="strings.get('inventory.VIEW_INSIGHTS')" ng-show="host.insights_system_id && host.summary_fields.inventory.hasOwnProperty('insights_credential_id')">
                                             <i class="fa fa-info"></i>

From 2a71232dd696052e7395b830d33f945f4d9ccdbb Mon Sep 17 00:00:00 2001
From: Jose Ariza <l.jlac001@gmail.com>
Date: Wed, 15 May 2019 09:05:27 -0500
Subject: [PATCH 2/6] #3348 added description to host list on inventories
 related hosts

Signed-off-by: Jose Ariza <l.jlac001@gmail.com>
---
 .../related/hosts/related-host.list.js           | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
index 4c220b6d61..29d39fa632 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
@@ -64,7 +64,17 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Hosts'),
                 uiSref: ".edit({inventory_id: host.inventory_id,host_id: host.id})",
                 ngClass: "{ 'host-disabled-label': !host.enabled }",
-                columnClass: 'col-lg-5 col-md-4 col-sm-8 col-xs-7',
+                columnClass: 'col-lg-3 col-md-3 col-sm-8 col-xs-7',
+                dataHostId: "{{ host.id }}",
+                dataType: "host",
+                class: 'InventoryManage-breakWord'
+            },
+            description: {
+                key: true,
+                label: i18n._('Description'),
+                uiSref: ".edit({inventory_id: host.inventory_id,host_id: host.id})",
+                ngClass: "{ 'host-disabled-label': !host.enabled }",
+                columnClass: 'col-lg-3 col-md-3 col-sm-8 col-xs-7',
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
                 class: 'InventoryManage-breakWord'
@@ -74,13 +84,13 @@ export default ['i18n', function(i18n) {
                 type: 'related_groups',
                 nosort: true,
                 showDelete: true,
-                columnClass: 'd-none d-md-flex List-tableCell col-lg-5 col-md-4'
+                columnClass: 'd-none d-md-flex List-tableCell col-lg-3 col-md-3'
             }
         },
 
         fieldActions: {
 
-            columnClass: 'col-lg-2 col-sm-4 col-xs-5 text-right',
+            columnClass: 'col-lg-2 col-sm-3 col-xs-5 text-right',
             edit: {
                 ngClick: "editHost(host)",
                 icon: 'icon-edit',

From 40ead6f9d18762589aa6d3c04cd5662deb434140 Mon Sep 17 00:00:00 2001
From: Jose Ariza <l.jlac001@gmail.com>
Date: Sat, 15 Jun 2019 11:57:35 -0500
Subject: [PATCH 3/6] #3348 implemented suggested style changes

Signed-off-by: Jose Ariza <l.jlac001@gmail.com>
---
 .../src/inventories-hosts/hosts/hosts.partial.html |  6 ++----
 .../inventories/related/hosts/related-host.list.js | 14 ++++----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
index b3639d9f4e..c0a16fd465 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
+++ b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
@@ -43,7 +43,7 @@
                         <div></div>
                         <div></div>
                         <div class="d-flex h-100">
-                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-3" query-set="host_queryset"></div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-3 col-md-6 col-sm-8 col-xs-7" query-set="host_queryset"></div>
                             <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="description" column-iterator="host" column-no-sort="undefined" column-label="Description" column-custom-class="col-lg-3" query-set="host_queryset"></div>
                             <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="d-none d-sm-flex col-sm-3 ellipsis" query-set="host_queryset"></div>
                             <div class="List-tableHeader List-tableHeader--actions actions-column col-lg-3 text-right" translate>Actions</div>
@@ -71,9 +71,7 @@
                                     </div>
                                 </div>
                                 <div class="List-tableCell name-column InventoryManage-breakWord col-lg-3">
-                                    <div class="host-name">
-                                        <a ui-sref="hosts.edit({host_id:host.id})">{{host.description }}</a>
-                                    </div>
+                                    {{host.description }}
                                 </div>
                                 <div class="List-tableCell inventory_name-column col-lg-3 elllipsis">
                                     <div class="host-name">
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
index 29d39fa632..f65628b012 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
@@ -64,33 +64,27 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Hosts'),
                 uiSref: ".edit({inventory_id: host.inventory_id,host_id: host.id})",
                 ngClass: "{ 'host-disabled-label': !host.enabled }",
-                columnClass: 'col-lg-3 col-md-3 col-sm-8 col-xs-7',
+                columnClass: 'col-lg-3 col-md-6 col-sm-8 col-xs-7',
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
                 class: 'InventoryManage-breakWord'
             },
             description: {
-                key: true,
                 label: i18n._('Description'),
-                uiSref: ".edit({inventory_id: host.inventory_id,host_id: host.id})",
-                ngClass: "{ 'host-disabled-label': !host.enabled }",
-                columnClass: 'col-lg-3 col-md-3 col-sm-8 col-xs-7',
-                dataHostId: "{{ host.id }}",
-                dataType: "host",
-                class: 'InventoryManage-breakWord'
+                columnClass: 'd-none d-lg-flex col-lg-3'
             },
             groups: {
                 label: i18n._("Related Groups"),
                 type: 'related_groups',
                 nosort: true,
                 showDelete: true,
-                columnClass: 'd-none d-md-flex List-tableCell col-lg-3 col-md-3'
+                columnClass: 'd-none d-lg-flex List-tableCell col-lg-3'
             }
         },
 
         fieldActions: {
 
-            columnClass: 'col-lg-2 col-sm-3 col-xs-5 text-right',
+            columnClass: 'col-lg-3 col-md-6 col-sm-4 col-xs-5 text-right',
             edit: {
                 ngClick: "editHost(host)",
                 icon: 'icon-edit',

From 24df1d7be65c1242e09a91c04252a4c35b478e07 Mon Sep 17 00:00:00 2001
From: Jose Ariza <l.jlac001@gmail.com>
Date: Sat, 15 Jun 2019 12:31:11 -0500
Subject: [PATCH 4/6] #3348 improved listing on mobile

Signed-off-by: Jose Ariza <l.jlac001@gmail.com>
---
 .../client/src/inventories-hosts/hosts/hosts.partial.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
index c0a16fd465..18b1c1449b 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
+++ b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
@@ -43,8 +43,8 @@
                         <div></div>
                         <div></div>
                         <div class="d-flex h-100">
-                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-3 col-md-6 col-sm-8 col-xs-7" query-set="host_queryset"></div>
-                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="description" column-iterator="host" column-no-sort="undefined" column-label="Description" column-custom-class="col-lg-3" query-set="host_queryset"></div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-3 col-md-3 col-sm-3 col-xs-7" query-set="host_queryset"></div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="description" column-iterator="host" column-no-sort="undefined" column-label="Description" column-custom-class="d-none d-sm-flex col-sm-3 ellipsis" query-set="host_queryset"></div>
                             <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="d-none d-sm-flex col-sm-3 ellipsis" query-set="host_queryset"></div>
                             <div class="List-tableHeader List-tableHeader--actions actions-column col-lg-3 text-right" translate>Actions</div>
                         </div>
@@ -70,10 +70,10 @@
                                         <a ui-sref="hosts.edit({host_id:host.id})">{{host.name }}</a>
                                     </div>
                                 </div>
-                                <div class="List-tableCell name-column InventoryManage-breakWord col-lg-3">
+                                <div class="List-tableCell name-column InventoryManage-breakWord d-none d-sm-flex col-sm-3 ellipsis">
                                     {{host.description }}
                                 </div>
-                                <div class="List-tableCell inventory_name-column col-lg-3 elllipsis">
+                                <div class="List-tableCell inventory_name-column d-none d-sm-flex col-sm-3 ellipsis">
                                     <div class="host-name">
                                         <a href="#/inventories/inventory/{{host.inventory}}">{{host.inventory_name}}</a>
                                     </div>

From 14bdf8deb30c02c6001625548144ead3239b1e69 Mon Sep 17 00:00:00 2001
From: Jose Ariza <l.jlac001@gmail.com>
Date: Sat, 15 Jun 2019 13:22:47 -0500
Subject: [PATCH 5/6] #3348 improved related listing on mobile

Signed-off-by: Jose Ariza <l.jlac001@gmail.com>
---
 .../inventories/related/hosts/related-host.list.js              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
index f65628b012..dd23cb3ff1 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
@@ -64,7 +64,7 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Hosts'),
                 uiSref: ".edit({inventory_id: host.inventory_id,host_id: host.id})",
                 ngClass: "{ 'host-disabled-label': !host.enabled }",
-                columnClass: 'col-lg-3 col-md-6 col-sm-8 col-xs-7',
+                columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-7',
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
                 class: 'InventoryManage-breakWord'

From b46db98b5a1cd7e10ad1fc70ad63c0aaa801909f Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 10 Jul 2019 11:42:33 -0400
Subject: [PATCH 6/6] Removes some unused classes.  Fix host desc ellipsis and
 responsiveness.  Add desc to group hosts

---
 .../src/inventories-hosts/hosts/host.list.js  |  1 -
 .../hosts/hosts.partial.html                  | 28 ++++++++++---------
 .../groups/hosts-related-groups.list.js       |  1 -
 .../inventories/related/groups/groups.list.js |  1 -
 .../nested-groups/group-nested-groups.list.js |  1 -
 .../nested-hosts/group-nested-hosts.list.js   | 16 ++++++++---
 .../related/hosts/related-host.list.js        |  8 ++++--
 .../nested-groups/host-nested-groups.list.js  |  1 -
 .../related/sources/sources.list.js           |  1 -
 .../list-generator/list-generator.factory.js  |  2 +-
 10 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/awx/ui/client/src/inventories-hosts/hosts/host.list.js b/awx/ui/client/src/inventories-hosts/hosts/host.list.js
index 9ca7a4114a..fbc4ea48ad 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/host.list.js
+++ b/awx/ui/client/src/inventories-hosts/hosts/host.list.js
@@ -71,7 +71,6 @@ export default ['i18n', function(i18n) {
                 columnClass: 'col-sm-4',
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
-                class: 'InventoryManage-breakWord'
             },
             inventory: {
                 label: i18n._('Inventory'),
diff --git a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
index 18b1c1449b..9d0058458c 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
+++ b/awx/ui/client/src/inventories-hosts/hosts/hosts.partial.html
@@ -43,9 +43,9 @@
                         <div></div>
                         <div></div>
                         <div class="d-flex h-100">
-                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-3 col-md-3 col-sm-3 col-xs-7" query-set="host_queryset"></div>
-                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="description" column-iterator="host" column-no-sort="undefined" column-label="Description" column-custom-class="d-none d-sm-flex col-sm-3 ellipsis" query-set="host_queryset"></div>
-                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="d-none d-sm-flex col-sm-3 ellipsis" query-set="host_queryset"></div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="name" column-iterator="host" column-no-sort="undefined" column-label="Name" column-custom-class="col-lg-3 col-md-4" query-set="host_queryset"></div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="description" column-iterator="host" column-no-sort="undefined" column-label="Description" column-custom-class="d-none d-lg-flex col-lg-3" query-set="host_queryset"></div>
+                            <div class="List-tableHeader" base-path="hosts" collection="hosts" dataset="host_dataset" column-sort="" column-field="inventory" column-iterator="host" column-no-sort="undefined" column-label="Inventory" column-custom-class="col-lg-3 col-md-4" query-set="host_queryset"></div>
                             <div class="List-tableHeader List-tableHeader--actions actions-column col-lg-3 text-right" translate>Actions</div>
                         </div>
                     </div>
@@ -64,21 +64,23 @@
                                     </a>
                                 </div>
                             </div>
-                            <div class="d-flex h-100">
-                                <div class="List-tableCell name-column InventoryManage-breakWord col-lg-3">
+                            <div class="d-flex h-100" style="min-width: 0;">
+                                <div class="List-tableCell name-column col-lg-3 col-md-4">
                                     <div class="host-name">
-                                        <a ui-sref="hosts.edit({host_id:host.id})">{{host.name }}</a>
+                                        <a ui-sref="hosts.edit({host_id:host.id})">{{ host.name }}</a>
                                     </div>
                                 </div>
-                                <div class="List-tableCell name-column InventoryManage-breakWord d-none d-sm-flex col-sm-3 ellipsis">
-                                    {{host.description }}
-                                </div>
-                                <div class="List-tableCell inventory_name-column d-none d-sm-flex col-sm-3 ellipsis">
-                                    <div class="host-name">
-                                        <a href="#/inventories/inventory/{{host.inventory}}">{{host.inventory_name}}</a>
+                                <div class="List-tableCell description-column d-none d-lg-flex col-lg-3">
+                                    <div class="d-inline-block text-truncate">
+                                        {{ host.description }}
                                     </div>
                                 </div>
-                                <div class="List-actionsContainer col-lg-3">
+                                <div class="List-tableCell inventory_name-column col-lg-3 col-md-4">
+                                    <div class="host-name d-inline-block text-truncate">
+                                        <a href="#/inventories/inventory/{{host.inventory}}">{{ host.inventory_name }}</a>
+                                    </div>
+                                </div>
+                                <div class="List-actionsContainer col-md-3 col-sm-4">
                                     <div class="List-actionButtonCell List-tableCell">
                                         <button id="insights-action" class="List-actionButton " ng-class="{'List-actionButton--selected' : $stateParams['host_id'] == host.id && $state.is('hosts.edit.insights')}" data-placement="top" ng-click="goToInsights(host.id)" aw-tool-tip="{{strings.get('inventory.VIEW_INSIGHTS')}}" data-tip-watch="strings.get('inventory.VIEW_INSIGHTS')" ng-show="host.insights_system_id && host.summary_fields.inventory.hasOwnProperty('insights_credential_id')">
                                             <i class="fa fa-info"></i>
diff --git a/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js b/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js
index f54c700063..ee7b5cb560 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js
+++ b/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js
@@ -38,7 +38,6 @@ export default ['i18n', function(i18n) {
                 key: true,
                 ngClick: "goToGroupGroups(group.id)",
                 columnClass: 'col-lg-6 col-md-6 col-sm-6 col-xs-6',
-                class: 'InventoryManage-breakWord',
             }
         },
 
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js
index e8607248b6..14b46e6715 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js
@@ -40,7 +40,6 @@
                 key: true,
                 uiSref: "inventories.edit.groups.edit({group_id:group.id})",
                 columnClass: 'col-lg-10 col-md-10 col-sm-10 col-xs-10',
-                class: 'InventoryManage-breakWord',
             }
         },
 
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js
index bbbaedddd1..be7f9b5b08 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js
@@ -39,7 +39,6 @@
                 key: true,
                 uiSref: "inventories.edit.groups.edit({group_id:nested_group.id})",
                 columnClass: 'col-lg-6 col-md-6 col-sm-6 col-xs-6',
-                class: 'InventoryManage-breakWord',
             }
         },
 
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js
index 53b21040c7..b2038dc3d9 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js
@@ -66,16 +66,24 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Hosts'),
                 uiSref: "inventories.edit.hosts.edit({host_id: nested_host.id})",
                 ngClass: "{ 'host-disabled-label': !nested_host.enabled }",
-                columnClass: 'col-lg-6 col-md-8 col-sm-8 col-xs-7',
+                columnClass: 'col-lg-4 col-md-8 col-sm-8 col-xs-7',
                 dataHostId: "{{ nested_host.id }}",
                 dataType: "nested_host",
-                class: 'InventoryManage-breakWord'
-            }
+            },
+            description: {
+                label: i18n._('Description'),
+                columnClass: 'd-none d-lg-flex col-lg-4',
+                template: `
+                    <div class="d-inline-block text-truncate">
+                        {{ nested_host.description }}
+                    </div>
+                `
+            },
         },
 
         fieldActions: {
 
-            columnClass: 'col-lg-6 col-md-4 col-sm-4 col-xs-5 text-right',
+            columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-5 text-right',
             edit: {
                 ngClick: "editHost(nested_host.id)",
                 icon: 'icon-edit',
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
index dd23cb3ff1..09d7a6ae1a 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
@@ -67,11 +67,15 @@ export default ['i18n', function(i18n) {
                 columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-7',
                 dataHostId: "{{ host.id }}",
                 dataType: "host",
-                class: 'InventoryManage-breakWord'
             },
             description: {
                 label: i18n._('Description'),
-                columnClass: 'd-none d-lg-flex col-lg-3'
+                columnClass: 'd-none d-lg-flex col-lg-3',
+                template: `
+                    <div class="d-inline-block text-truncate">
+                        {{ host.description }}
+                    </div>
+                `
             },
             groups: {
                 label: i18n._("Related Groups"),
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js
index 49e66f3f0e..edb206cffb 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js
@@ -39,7 +39,6 @@
                 key: true,
                 ngClick: "goToGroupGroups(nested_group.id)",
                 columnClass: 'col-lg-6 col-md-6 col-sm-6 col-xs-6',
-                class: 'InventoryManage-breakWord',
             }
         },
 
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js b/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js
index e3ea05cb36..4350de5823 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js
@@ -40,7 +40,6 @@
                 key: true,
                 uiSref: "inventories.edit.inventory_sources.edit({inventory_source_id:inventory_source.id})",
                 columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-4',
-                class: 'InventoryManage-breakWord',
             },
             source: {
                 label: i18n._('Type'),
diff --git a/awx/ui/client/src/shared/list-generator/list-generator.factory.js b/awx/ui/client/src/shared/list-generator/list-generator.factory.js
index a3227121d6..11e932cc09 100644
--- a/awx/ui/client/src/shared/list-generator/list-generator.factory.js
+++ b/awx/ui/client/src/shared/list-generator/list-generator.factory.js
@@ -363,7 +363,7 @@ export default ['$compile', 'Attr', 'Icon',
                     innerTable += `</div>`;
                 }
 
-                innerTable += `<div class='d-flex h-100'>`;
+                innerTable += `<div class='d-flex h-100' style='min-width: 0;'>`;
 
                 if (list.index) {
                     innerTable += "<div class=\"d-none d-sm-flex index-column List-tableCell\">{{ $index + ((" + list.iterator + "_page - 1) * " + list.iterator + "_page_size) + 1 }}.</div>\n";