Make FilterForm view more compact.

It can easily overflow on mobile devices.

frontend/src/components/filter/Form.vue

@@ -13,7 +13,10 @@
 
     <div class="date-selectors" v-if="enableDateRange">
       <div class="date-selector">
-        <label for="start-date">Start Date</label>
+        <label for="start-date">
+          <font-awesome-icon icon="fas fa-calendar-day" />
+          Start Date
+        </label>
         <input type="datetime-local"
                id="start-date"
                name="start-date"
@@ -49,7 +52,10 @@
       </div>
 
       <div class="date-selector">
-        <label for="end-date">End Date</label>
+        <label for="end-date">
+          <font-awesome-icon icon="fas fa-calendar-day" />
+          End Date
+        </label>
         <input type="datetime-local"
                id="end-date"
                name="end-date"
@@ -85,9 +91,12 @@
       </div>
     </div>
 
-    <div class="pagination-container">
+    <div class="form-row">
-      <div class="limit-container">
+      <div class="container limit-container">
-        <label for="limit">Max Results</label>
+        <label for="limit">
+          <font-awesome-icon icon="fas fa-list-ol" />
+          Max Results
+        </label>
         <input type="number"
                id="limit"
                name="limit"
@@ -97,49 +106,58 @@
                :disabled="disabled"
                min="1" />
       </div>
+
+      <div class="container order-container">
+        <label for="order">
+          <font-awesome-icon icon="fas fa-sort" />
+          Order
+        </label>
+        <select id="order"
+                name="order"
+                v-model="newFilter.order"
+                :disabled="disabled">
+          <option value="asc">Oldest points first</option>
+          <option value="desc">Newest points first</option>
+        </select>
+      </div>
     </div>
 
-    <div class="order-container">
+    <div class="form-row">
-      <label for="order">Order</label>
+      <div class="container resolution-container">
-      <select id="order"
+        <label for="resolution">
-              name="order"
+          <p class="title">
-              v-model="newFilter.order"
+            <font-awesome-icon icon="fas fa-ruler" />
-              :disabled="disabled">
+            Resolution (m)
-        <option value="asc">Oldest points first</option>
+          </p>
-        <option value="desc">Newest points first</option>
-      </select>
-    </div>
 
-    <div class="resolution-container">
+          <p class="help">
-      <label for="resolution">
+            Adjacent points will be at least this far apart.
-        <p class="title">
+          </p>
-          Resolution (m)
+        </label>
-        </p>
 
-        <p class="help">
+        <input type="number"
-          Adjacent points will be at least this far apart.
+               id="resolution"
-        </p>
+               name="resolution"
-      </label>
+               :value="resolution"
+               :disabled="disabled"
+               @input="setResolution"
+               @change="setResolution"
+               min="0" />
+      </div>
 
-      <input type="number"
+      <div class="container device-container">
-             id="resolution"
+        <label for="device">
-             name="resolution"
+          <font-awesome-icon icon="fas fa-mobile-alt" />
-             :value="resolution"
+          Device
-             :disabled="disabled"
+        </label>
-             @input="setResolution"
+        <select id="device"
-             @change="setResolution"
+                name="device"
-             min="0" />
+                v-model="newFilter.deviceId"
-    </div>
+                :disabled="disabled">
-
+          <option value="">All</option>
-    <div class="device-container">
+          <option v-for="device in devices" :key="device.id" :value="device.id">{{ device.name }}</option>
-      <label for="device">Device</label>
+        </select>
-      <select id="device"
+      </div>
-              name="device"
-              v-model="newFilter.deviceId"
-              :disabled="disabled">
-        <option value="">All</option>
-        <option v-for="device in devices" :key="device.id" :value="device.id">{{ device.name }}</option>
-      </select>
     </div>
 
     <div class="footer">
@@ -394,17 +412,20 @@ export default {
     }
   }
 
-  .pagination-container {
+  .form-row {
+    width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     margin: 0.5em;
 
-    .limit-container {
+    .container {
+      width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
+      padding: 0 1em;
     }
 
     label {
@@ -416,6 +437,12 @@ export default {
     }
   }
 
+  .limit-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .resolution-container {
     display: flex;
     flex-direction: column;