fix layout of search dropdowns

awx/ui/client/legacy-styles/ansible-ui.less

@@ -2242,3 +2242,7 @@ a:hover {
 #scheduled-jobs-tab .List-header {
     display: none;
 }
+
+.ui-widget {
+    font-family: 'Open Sans';
+}

awx/ui/client/src/search/tagSearch.block.less

@@ -29,9 +29,9 @@
     display: flex;
     white-space: nowrap;
     align-items: center;
-    max-height: 400px;
     cursor: pointer;
     text-transform: uppercase;
+    position: relative;
 }
 
 .TagSearch-typeDropdown.is-open {
@@ -49,7 +49,7 @@
 
 .TagSearch-dropdownContainer {
     position: absolute;
-    left: 15px;
+    left: -1px;
     top: 34px;
     font-size: 14px;
     border-radius: 5px;
@@ -65,13 +65,12 @@
 }
 
 .TagSearch-dropdownContainer--searchTypes {
-    min-width: 96px;
+    min-width: ~"calc(100% + 1px)";
 }
 
 .TagSearch-dropdownContainer--typeOptions {
-    right: 15px;
+    right: -1px;
-    left: initial;
+    left: -1px;
-    width: ~"calc(100% - 123px)";
 }
 
 .TagSearch-dropdownItem {
@@ -97,6 +96,7 @@
     border-bottom-right-radius: 5px;
     display: flex;
     background-color: @default-bg;
+    position: relative;
 }
 
 .TagSearch-searchTermContainer.is-open {

awx/ui/client/src/search/tagSearch.partial.html

@@ -10,15 +10,15 @@
                 </span>
                 <i class="TagSearch-selectDownIcon fa fa-angle-down"
                     ng-hide="searchTypes.length === 1"></i>
-            </div>
+                <div aw-click-off="showTypeDropdown" class="TagSearch-dropdownContainer
-            <div aw-click-off="showTypeDropdown" class="TagSearch-dropdownContainer
+                    TagSearch-dropdownContainer--searchTypes"
-                TagSearch-dropdownContainer--searchTypes"
+                    ng-show="showTypeDropdown">
-                ng-show="showTypeDropdown">
+                    <div class="TagSearch-dropdownItem"
-                <div class="TagSearch-dropdownItem"
+                        ng-repeat="type in searchTypes track by $index"
-                    ng-repeat="type in searchTypes track by $index"
+                        ng-class="{'is-selected': (currentSearchType.id === type.id)}"
-                    ng-class="{'is-selected': (currentSearchType.id === type.id)}"
+                        ng-click="setSearchType(type)">
-                    ng-click="setSearchType(type)">
+                        {{ type.label }}
-                    {{ type.label }}
+                    </div>
                 </div>
             </div>
             <div class="TagSearch-searchTermContainer"
@@ -43,16 +43,16 @@
                     <i class="TagSearch-selectDownIcon
                         fa fa-angle-down">
                     </i>
-                </div>
+                    <div aw-click-off="showCurrentSearchDropdown"
-                <div aw-click-off="showCurrentSearchDropdown"
+                        class="TagSearch-dropdownContainer
-                    class="TagSearch-dropdownContainer
+                        TagSearch-dropdownContainer--typeOptions"
-                    TagSearch-dropdownContainer--typeOptions"
+                        ng-show="showCurrentSearchDropdown &&
-                    ng-show="showCurrentSearchDropdown &&
+                            currentSearchType.type === 'select'">
-                        currentSearchType.type === 'select'">
+                        <div class="TagSearch-dropdownItem"
-                    <div class="TagSearch-dropdownItem"
+                            ng-repeat="type in currentSearchType.typeOptions track by $index"
-                        ng-repeat="type in currentSearchType.typeOptions track by $index"
+                            ng-click="addTag(type)">
-                        ng-click="addTag(type)">
+                            {{ type.label }}
-                        {{ type.label }}
+                        </div>
                     </div>
                 </div>
             </div>