improve styling of filter panel

Adapt width so that the date range fits.
Width of form fields is now 100%.
y-range restrictions are now rendered in one line.

pdb-js/src/app/visualization-page/visualization-page.component.html

@@ -2,19 +2,19 @@
 
 </style>
 
+
 <div id="visualization">
   <div id="query-box">
       <input matInput placeholder="Query" value="{{query}}" />
+      <pdb-query-autocomplete></pdb-query-autocomplete>
   </div>
   <div id="filters">
-    
-    
-    <mat-form-field>
+    <mat-form-field class="mat-field-full-width">
       <mat-label>Date Range:</mat-label>
       <input matInput [formControl]="dateRange" name="dates" />
     </mat-form-field>
   
-    <mat-form-field>
+    <mat-form-field class="mat-field-full-width">
       <mat-label>Type:</mat-label>
       <mat-select [formControl]="selectedPlotType">
         <mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
@@ -68,7 +68,6 @@
         <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
         Plot
       </button>
-    
       <!--
       <button mat-button (click)="gallery()">
         <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
@@ -79,4 +78,7 @@
     </div>
   </div>
   <div id="results"></div>
-</div>
+  
+</div>
+
+