Tables: Align status-filter-bars with action-bars

Saves some space and they are related actions anyway.

web/app/src/assets/base.css

@@ -248,6 +248,16 @@ footer {
   padding: var(--spacer-sm) 0;
 }
 
+.btn-bar .align-right,
+.btn-bar-group .align-right {
+  margin-left: auto;
+}
+
+.btn-bar-group {
+  align-items: center;
+  display: flex;
+}
+
 .btn {
   align-items: center;
   background-color: var(--color-button-background);

web/app/src/components/jobs/JobsTable.vue

@@ -1,11 +1,15 @@
 <template>
   <h2 class="column-title">Jobs</h2>
-  <job-actions-bar />
+  <div class="btn-bar-group">
-  <status-filter-bar
+    <job-actions-bar />
-    :availableStatuses="availableStatuses"
+    <div class="align-right">
-    :activeStatuses="shownStatuses"
+      <status-filter-bar
-    @click="toggleStatusFilter"
+        :availableStatuses="availableStatuses"
-  />
+        :activeStatuses="shownStatuses"
+        @click="toggleStatusFilter"
+      />
+    </div>
+  </div>
   <div>
     <div class="job-list with-clickable-row" id="flamenco_job_list"></div>
   </div>

web/app/src/components/jobs/TasksTable.vue

@@ -1,11 +1,15 @@
 <template>
   <h3 class="sub-title">Tasks</h3>
-  <task-actions-bar />
+  <div class="btn-bar-group">
-  <status-filter-bar
+    <task-actions-bar />
-    :availableStatuses="availableStatuses"
+    <div class="align-right">
-    :activeStatuses="shownStatuses"
+      <status-filter-bar
-    @click="toggleStatusFilter"
+        :availableStatuses="availableStatuses"
-  />
+        :activeStatuses="shownStatuses"
+        @click="toggleStatusFilter"
+      />
+    </div>
+  </div>
   <div>
     <div class="task-list with-clickable-row" id="flamenco_task_list"></div>
   </div>