From 964e9cb1a35546228f99d565cec0bfd3e4471b39 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Tue, 5 Jul 2022 13:17:13 +0200
Subject: [PATCH] Tables: Align status-filter-bars with action-bars

Saves some space and they are related actions anyway.
---
 web/app/src/assets/base.css                | 10 ++++++++++
 web/app/src/components/jobs/JobsTable.vue  | 16 ++++++++++------
 web/app/src/components/jobs/TasksTable.vue | 16 ++++++++++------
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index dd7b1b73..5b1e1e89 100644
--- a/web/app/src/assets/base.css
+++ b/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);
diff --git a/web/app/src/components/jobs/JobsTable.vue b/web/app/src/components/jobs/JobsTable.vue
index fbe695e7..fa19ac2d 100644
--- a/web/app/src/components/jobs/JobsTable.vue
+++ b/web/app/src/components/jobs/JobsTable.vue
@@ -1,11 +1,15 @@
 <template>
   <h2 class="column-title">Jobs</h2>
-  <job-actions-bar />
-  <status-filter-bar
-    :availableStatuses="availableStatuses"
-    :activeStatuses="shownStatuses"
-    @click="toggleStatusFilter"
-  />
+  <div class="btn-bar-group">
+    <job-actions-bar />
+    <div class="align-right">
+      <status-filter-bar
+        :availableStatuses="availableStatuses"
+        :activeStatuses="shownStatuses"
+        @click="toggleStatusFilter"
+      />
+    </div>
+  </div>
   <div>
     <div class="job-list with-clickable-row" id="flamenco_job_list"></div>
   </div>
diff --git a/web/app/src/components/jobs/TasksTable.vue b/web/app/src/components/jobs/TasksTable.vue
index dfbfaf67..cd55cadc 100644
--- a/web/app/src/components/jobs/TasksTable.vue
+++ b/web/app/src/components/jobs/TasksTable.vue
@@ -1,11 +1,15 @@
 <template>
   <h3 class="sub-title">Tasks</h3>
-  <task-actions-bar />
-  <status-filter-bar
-    :availableStatuses="availableStatuses"
-    :activeStatuses="shownStatuses"
-    @click="toggleStatusFilter"
-  />
+  <div class="btn-bar-group">
+    <task-actions-bar />
+    <div class="align-right">
+      <status-filter-bar
+        :availableStatuses="availableStatuses"
+        :activeStatuses="shownStatuses"
+        @click="toggleStatusFilter"
+      />
+    </div>
+  </div>
   <div>
     <div class="task-list with-clickable-row" id="flamenco_task_list"></div>
   </div>