Fix search form.

frontend/app/framework/angular/forms/dropdown.component.html

@@ -21,7 +21,10 @@
             </div>
 
             <div class="control-dropdown-items" #container>
-                <div *ngFor="let item of snapshot.suggestedItems; let i = index;" class="control-dropdown-item control-dropdown-item-selectable" [class.active]="i === snapshot.selectedIndex" (mousedown)="selectIndexAndClose(i)"
+                <div *ngFor="let item of snapshot.suggestedItems; let i = index;" class="control-dropdown-item control-dropdown-item-selectable" 
+                    [class.active]="i === snapshot.selectedIndex"
+                    [class.separated]="separated"
+                    (mousedown)="selectIndexAndClose(i)"
                     [sqxScrollActive]="i === snapshot.selectedIndex"
                     [sqxScrollContainer]="container">
                     <ng-container *ngIf="!templateItem">{{item}}</ng-container>

frontend/app/framework/angular/forms/dropdown.component.ts

@@ -45,6 +45,9 @@ export class DropdownComponent extends StatefulControlComponent<State, any[]> im
     @Input()
     public canSearch = true;
 
+    @Input()
+    public separated = false;
+
     @ContentChildren(TemplateRef)
     public templates: QueryList<any>;
 

frontend/app/framework/angular/forms/tag-editor.component.html

@@ -35,6 +35,7 @@
         <div class="control-dropdown" [sqxAnchoredTo]="form" position="bottom-left" #container @fade>
             <div *ngFor="let item of snapshot.suggestedItems; let i = index" class="control-dropdown-item control-dropdown-item-selectable"
                 [class.active]="i === snapshot.suggestedIndex"
+                [class.separated]="separated"
                 (mousedown)="selectValue(item)" 
                 (mouseover)="selectIndex(i)"
                 [sqxScrollActive]="i === snapshot.suggestedIndex"

frontend/app/framework/angular/forms/tag-editor.component.ts

@@ -169,6 +169,9 @@ export class TagEditorComponent extends StatefulControlComponent<State, any[]> i
     @Input()
     public dashed = false;
 
+    @Input()
+    public separated = false;
+
     @Input()
     public singleLine = false;
 

frontend/app/shared/components/queries/filter-comparison.component.html

@@ -1,6 +1,6 @@
 <div class="row no-gutters mb-1" *ngIf="fieldModel">
     <div class="col-auto path">
-        <sqx-dropdown [items]="model.fields | sqxKeys" [ngModel]="filter.path" (ngModelChange)="changePath($event)" [canSearch]="false">
+        <sqx-dropdown [items]="model.fields | sqxKeys" [ngModel]="filter.path" (ngModelChange)="changePath($event)" [canSearch]="false" separated="true">
             <ng-template let-field="$implicit">
                 <div>{{model.fields[field].displayName}}</div>
                 

frontend/app/shared/components/queries/sorting.component.ts

@@ -15,7 +15,7 @@ import { QueryModel, QuerySorting } from '@app/shared/internal';
         <div class="row">
             <div class="col">
                 <div class="form-inline">
-                    <sqx-dropdown [items]="model.fields | sqxKeys" [ngModel]="sorting.path" (ngModelChange)="changePath($event)" [canSearch]="false">
+                    <sqx-dropdown [items]="model.fields | sqxKeys" [ngModel]="sorting.path" (ngModelChange)="changePath($event)" [canSearch]="false" separated="true">
                         <ng-template let-field="$implicit">
                             <div>{{model.fields[field].displayName}}</div>
 

frontend/app/shared/components/search-form.component.ts

@@ -56,7 +56,7 @@ export class SearchFormComponent implements OnChanges {
     public saveQueryDialog = new DialogModel();
     public saveQueryForm = new SaveQueryForm(this.formBuilder);
 
-    public searchDialog = new DialogModel(true);
+    public searchDialog = new DialogModel(false);
 
     public hasFilter: boolean;
 

frontend/app/theme/_forms.scss

@@ -147,29 +147,56 @@
         background: $color-dark-foreground;
         border: 1px solid $color-input;
         max-height: 15rem;
+        overflow-x: hidden;
         overflow-y: auto;
         padding: .25rem 0;
     }
 
     &-item {
-        padding: .5rem .75rem;
-    }
-
-    &-item-selectable {
         & {
-            cursor: pointer;
+            padding: .5rem .75rem;
+        }
+
+        &.separated {
+            border-bottom: 1px solid lighten($color-input, 5%);
+
+            &:last-child {
+                border: 0;
+            }
         }
 
         &.active,
+        &:active,
         &:hover {
-            background: $color-theme-blue;
-            border: 0;
             color: $color-dark-foreground;
 
             & * {
                 color: $color-dark-foreground !important;
             }
         }
+
+        &:active,
+        &.active {
+            background: $color-theme-blue;
+
+            &.separated {
+                border-color: $color-theme-blue;
+            }
+        }
+
+        &:hover {
+            background: $color-theme-blue-dark;
+
+            &.separated {
+                border-color: $color-theme-blue-dark;
+            }
+        }
+
+        &-selectable {
+            & {
+                cursor: pointer;
+            }
+        }
     }
 }