Realigned filter bar for mobile.

assets/components/header/filter-bar.vue

@@ -45,16 +45,18 @@
         </span>
 
         <span>
-            <Icon icon="filter" />
+            <span class="filters-container">
+                <Icon icon="filter" />
 
-            <Filters
+                <Filters
-                class="filters-container"
+                    class="filters-block"
-                :filter="filter"
+                    :filter="filter"
-                @set-filter="setFilter"
+                    @set-filter="setFilter"
-            />
+                />
+            </span>
 
             <v-popover class="filters-compact">
-                <div>Filters</div>
+                <Icon icon="filter" />
 
                 <div slot="popover">
                     <Filters
@@ -122,6 +124,7 @@ export default {
     background: $background;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding: .5rem 1rem;
     z-index: 1;
     font-size: 0;
@@ -136,6 +139,10 @@ export default {
     display: inline-block;
 }
 
+.filters-block {
+    display: inline-block;
+}
+
 .filters-compact {
     font-size: 1rem;
     font-weight: bold;

public/css/style.css

@@ -48,6 +48,8 @@
   display: flex;
   -webkit-box-pack: justify;
           justify-content: space-between;
+  -webkit-box-align: center;
+          align-items: center;
   padding: .5rem 1rem;
   z-index: 1;
   font-size: 0;
@@ -59,6 +61,9 @@
 .filters-container[data-v-6db17c96] {
   display: inline-block;
 }
+.filters-block[data-v-6db17c96] {
+  display: inline-block;
+}
 .filters-compact[data-v-6db17c96] {
   font-size: 1rem;
   font-weight: bold;