clean up responsive behavior of advanced search

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
 import { t } from '@lingui/macro';
 import {
   Checkbox,
   Toolbar,
-  ToolbarContent,
+  ToolbarContent as PFToolbarContent,
   ToolbarGroup,
   ToolbarItem,
   ToolbarToggleGroup,
   Dropdown,
+  DropdownPosition,
   KebabToggle,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
@@ -19,6 +21,12 @@ import Sort from '../Sort';
 import { SearchColumns, SortColumns, QSConfig } from '../../types';
 import { KebabifiedProvider } from '../../contexts/Kebabified';
 
+const ToolbarContent = styled(PFToolbarContent)`
+  & > .pf-c-toolbar__content-section {
+    flex-wrap: nowrap;
+  }
+`;
+
 function DataListToolbar({
   itemCount,
   clearAllFilters,
@@ -47,6 +55,11 @@ function DataListToolbar({
   const [isKebabModalOpen, setIsKebabModalOpen] = useState(false);
   const [isAdvancedSearchShown, setIsAdvancedSearchShown] = useState(false);
 
+  const viewportWidth =
+    window.innerWidth || document.documentElement.clientWidth;
+  const dropdownPosition =
+    viewportWidth >= 992 ? DropdownPosition.right : DropdownPosition.left;
+
   const onShowAdvancedSearch = shown => {
     setIsAdvancedSearchShown(shown);
     setIsKebabOpen(false);
@@ -135,6 +148,7 @@ function DataListToolbar({
                   />
                 }
                 isOpen={isKebabOpen}
+                position={dropdownPosition}
                 isPlain
                 dropdownItems={additionalControls}
               />

awx/ui_next/src/components/Search/AdvancedSearch.jsx

@@ -24,6 +24,10 @@ const AdvancedGroup = styled.div`
     display: grid;
     grid-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
   }
+
+  & .pf-c-select {
+    min-width: 150px;
+  }
 `;
 
 function AdvancedSearch({