Use simple modal for search.

frontend/app/features/settings/pages/clients/client.component.html

@@ -69,7 +69,7 @@
 </div>
 
 <ng-container *sqxModal="connectDialog">
-    <sqx-modal-dialog large="true" (close)="connectDialog.hide()">
+    <sqx-modal-dialog (close)="connectDialog.hide()" large="true">
         <ng-container title>
             Connect
         </ng-container>

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

@@ -41,29 +41,32 @@
 </sqx-onboarding-tooltip>
 
 <ng-container *sqxModal="searchDialog;closeAuto:false">
-    <div class="dropdown-menu" [sqxAnchoredTo]="inputFind" @fade>
+    <sqx-modal-dialog (close)="searchDialog.hide()" large="true">
-        <div class="form-horizontal">
+        <ng-container title>
-            <div class="submit">
+            Custom Query
-                <button type="button" class="btn btn-primary mr-2" (click)="search(true)">
+        </ng-container>
-                    Submit
+        
-                </button>
+        <ng-container content>
-
+            <div class="form-horizontal">
-                <button type="button" class="btn btn-text-secondary" (click)="searchDialog.hide()">
+                <sqx-query
-                    <i class="icon-close"></i>
+                    [model]="queryModel" 
-                </button>
+                    [query]="query"
-            </div>
+                    (queryChange)="changeQuery($event)"
-            <sqx-query
+                    [language]="language">
-                [model]="queryModel" 
+                </sqx-query>
-                [query]="query"
-                (queryChange)="changeQuery($event)"
-                [language]="language">
-            </sqx-query>
 
-            <div class="link">
+                <div class="link">
-                Read more about filtering in the <a href="https://docs.squidex.io/04-guides/02-api.html" sqxExternalLink>Documentation</a>.
+                    Read more about filtering in the <a href="https://docs.squidex.io/04-guides/02-api.html" sqxExternalLink>Documentation</a>.
+                </div>
             </div>
-        </div>
+        </ng-container>
-    </div>        
+        
+        <ng-container footer>
+                <button type="button" class="float-right btn btn-primary mr-2" (click)="search(true)">
+                    Submit
+                </button>
+        </ng-container>
+    </sqx-modal-dialog>        
 </ng-container>
 
 <ng-container *sqxModal="saveQueryDialog">

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

@@ -13,21 +13,8 @@
     padding-right: 3rem;
 }
 
-.dropdown-menu {
-    max-height: 80%;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
 .form-horizontal {
-    padding: 1rem 1.5rem;
+    min-width: 35rem;
-    position: relative;
-    min-width: 60rem;
-    max-width: 60rem;
-}
-
-.submit {
-    @include absolute(.5rem, 1rem, auto, auto);
 }
 
 .buttons {