diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index 070c56359f..f55f57a693 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -4,8 +4,6 @@ import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Checkbox,
- Level,
- LevelItem,
Toolbar as PFToolbar,
ToolbarGroup as PFToolbarGroup,
ToolbarItem,
@@ -22,15 +20,15 @@ const AWXToolbar = styled.div`
--awx-toolbar--BorderColor: #ebebeb;
--awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
+ --pf-global--target-size--MinHeight: 0;
+ --pf-global--target-size--MinWidth: 0;
+ --pf-global--FontSize--md: 14px;
+
border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
background-color: var(--awx-toolbar--BackgroundColor);
display: flex;
min-height: 70px;
- padding-top: 5px;
-
- --pf-global--target-size--MinHeight: 0px;
- --pf-global--target-size--MinWidth: 0px;
- --pf-global--FontSize--md: 14px;
+ flex-grow: 1;
`;
const Toolbar = styled(PFToolbar)`
@@ -43,6 +41,35 @@ const ToolbarGroup = styled(PFToolbarGroup)`
margin: 0;
}
`;
+
+const ColumnLeft = styled.div`
+ display: flex;
+ flex-basis: 100%;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 10px 0 8px 0;
+
+ @media screen and (min-width: 980px) {
+ flex-basis: 50%;
+ }
+`;
+
+const ColumnRight = styled(ColumnLeft)`
+ margin-left: 60px;
+ padding: 8px 0 10px 0;
+
+ @media screen and (min-width: 980px) {
+ margin-left: 0;
+ padding: 10px 0 8px 0;
+ }
+`;
+
+const AdditionalControlsWrapper = styled.div`
+ display: flex;
+ flex-grow: 1;
+ justify-content: flex-end;
+`;
+
class DataListToolbar extends React.Component {
render () {
const {
@@ -65,24 +92,20 @@ class DataListToolbar extends React.Component {
return (