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>
+
+

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

@@ -14,7 +14,7 @@
     grid:
       "query-box query-box" auto
       "filters results" 1fr
-      / minmax(200px, 1fr) 3fr;
+      / 23em 3fr;
   }
 }
 
@@ -40,9 +40,11 @@
 #filters {
   grid-area: filters;
   background-color: #eee;
-  padding-left: 1em;
+  padding: 1em;
 }
 
 #results {
   grid-area: results;
 }
+
+

pdb-js/src/app/y-axis-range/y-axis-range.component.html

@@ -4,7 +4,8 @@
 <mat-form-field>
   <input matInput type="number" placeholder="Max Y-Value" min="0" value="{{maxYValue}}">
 </mat-form-field>
- <mat-form-field>
+ <mat-form-field class="yAxisUnit">
+  <mat-label>Unit:</mat-label>
   <mat-select [(value)]="yAxisUnit">
     <mat-option value="AUTOMATIC">automatic</mat-option>
     <mat-option value="MILLISECONDS">milli seconds</mat-option>

pdb-js/src/app/y-axis-range/y-axis-range.component.scss

@@ -0,0 +1,9 @@
+mat-form-field {
+  width: 5em;
+  margin-right: 1ex;
+}
+
+.yAxisUnit{
+  width: 8em;
+  margin-right: 0;
+}

pdb-js/src/styles.scss

@@ -70,3 +70,11 @@ a.external-link:after {
 body .mat-select-panel {
   max-height: 500px;
 }
+
+.mat-form-field {
+  font-family: Arial, sans-serif;
+}
+
+mat-form-field {
+  width: 100%;
+}