From 8dc788dbcbe4e447945f7436c22ef75b9699745f Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Thu, 24 Jun 2021 10:01:34 -0700
Subject: [PATCH] clean up responsive behavior of advanced search

---
 .../DataListToolbar/DataListToolbar.jsx          | 16 +++++++++++++++-
 .../src/components/Search/AdvancedSearch.jsx     |  4 ++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index cd1abc224c..268fd3d3e9 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/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}
               />
diff --git a/awx/ui_next/src/components/Search/AdvancedSearch.jsx b/awx/ui_next/src/components/Search/AdvancedSearch.jsx
index cf74873254..7bf97e0bd7 100644
--- a/awx/ui_next/src/components/Search/AdvancedSearch.jsx
+++ b/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({