diff --git a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
index a70ca52232..5ea13ee6b3 100644
--- a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
@@ -71,6 +71,7 @@ export function HeaderCell({
sortBy,
columnIndex,
idPrefix,
+ className,
children,
}) {
const sort = sortKey
@@ -81,7 +82,11 @@ export function HeaderCell({
}
: null;
return (
-
+ |
{children}
|
);
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
index c9594e4e17..fe3dffdf35 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
@@ -1,5 +1,6 @@
import React, { useState, useCallback, useEffect } from 'react';
import { useLocation, useRouteMatch, Link } from 'react-router-dom';
+import styled from 'styled-components';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Card, PageSection, DropdownItem } from '@patternfly/react-core';
@@ -18,6 +19,14 @@ import useWsInventories from './useWsInventories';
import AddDropDownButton from '../../../components/AddDropDownButton';
import InventoryListItem from './InventoryListItem';
+const ResponsiveHeaderCell = styled(HeaderCell)`
+ @media (max-width: 992px) {
+ && {
+ display: none;
+ }
+ }
+`;
+
const QS_CONFIG = getQSConfig('inventory', {
page: 1,
page_size: 20,
@@ -195,9 +204,9 @@ function InventoryList({ i18n }) {
{i18n._(t`Status`)}
{i18n._(t`Type`)}
{i18n._(t`Organization`)}
- {i18n._(t`Groups`)}
- {i18n._(t`Hosts`)}
- {i18n._(t`Sources`)}
+ {i18n._(t`Groups`)}
+ {i18n._(t`Hosts`)}
+ {i18n._(t`Sources`)}
{i18n._(t`Actions`)}
}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index d10dbf2a0a..354affdf3b 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -6,6 +6,7 @@ import { Tr, Td } from '@patternfly/react-table';
import { PencilAltIcon } from '@patternfly/react-icons';
import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
+import styled from 'styled-components';
import { timeOfDay } from '../../../util/dates';
import { InventoriesAPI } from '../../../api';
import { Inventory } from '../../../types';
@@ -13,6 +14,14 @@ import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
import CopyButton from '../../../components/CopyButton';
import StatusLabel from '../../../components/StatusLabel';
+const ResponsiveTd = styled(Td)`
+ @media (max-width: 992px) {
+ && {
+ display: none;
+ }
+ }
+`;
+
function InventoryListItem({
inventory,
rowIndex,
@@ -89,11 +98,15 @@ function InventoryListItem({
{inventory?.summary_fields?.organization?.name}
- {inventory.total_groups} |
- {inventory.total_hosts} |
-
+
+ {inventory.total_groups}
+
+
+ {inventory.total_hosts}
+
+
{inventory.total_inventory_sources}
- |
+
{inventory.pending_deletion ? (
|