Webapp: nicer styling of the 'Delete Jobs' confirmation popover

By using the flexbox layout model better, I could remove the `<div
class="align-right">` elements. And by adding a more visual border and
shadow, the popover looks good without having its height set explicitly.
This in turn makes it look good also when it's wrapping due to a small
screen size.

web/app/src/assets/base.css

@@ -347,26 +347,17 @@ dl dd:empty {
 .btn-bar {
   align-items: center;
   display: flex;
+  flex-grow: 1;
   flex-wrap: wrap;
   gap: calc(var(--spacer-sm) / 3) var(--spacer-sm);
   padding: var(--spacer-sm) 0;
 }
 
-.btn-bar .align-right,
-.btn-bar-group .align-right {
-  margin-left: auto;
-}
-
-.btn-bar .align-center,
-.btn-bar-group .align-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .btn-bar-group {
   align-items: center;
   display: flex;
   padding: var(--spacer-sm) 0;
+  position: relative;
 }
 
 .btn-bar-group .btn-bar {

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

@@ -154,12 +154,17 @@ export default {
   background-color: var(--color-background-popover);
   border-radius: var(--border-radius);
   border: var(--border-color) var(--border-width);
+  box-shadow:
+    inset 0 0 0.3em var(--color-danger),
+    0 0 0.3rem var(--color-background),
+    0 0 3rem var(--color-background);
+  box-sizing: border-box;
   color: var(--color-text);
   display: flex;
-  height: 3.5em;
+  flex-wrap: wrap;
   left: 0;
   margin: 0;
-  padding: 1rem 1rem;
+  padding: 0.5rem 1rem;
   position: absolute;
   right: 0;
   top: 0;

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

@@ -2,12 +2,10 @@
   <h2 class="column-title">Jobs</h2>
   <div class="btn-bar-group">
     <job-actions-bar :activeJobID="jobs.activeJobID" @mass-select="handleMassSelect" />
-    <div class="align-right">
+    <status-filter-bar
-      <status-filter-bar
+      :availableStatuses="availableStatuses"
-        :availableStatuses="availableStatuses"
+      :activeStatuses="shownStatuses"
-        :activeStatuses="shownStatuses"
+      @click="toggleStatusFilter" />
-        @click="toggleStatusFilter" />
-    </div>
   </div>
   <div>
     <div class="job-list with-clickable-row" id="flamenco_job_list"></div>

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

@@ -2,12 +2,10 @@
   <h3 class="sub-title">Tasks</h3>
   <div class="btn-bar-group">
     <task-actions-bar />
-    <div class="align-right">
+    <status-filter-bar
-      <status-filter-bar
+      :availableStatuses="availableStatuses"
-        :availableStatuses="availableStatuses"
+      :activeStatuses="shownStatuses"
-        :activeStatuses="shownStatuses"
+      @click="toggleStatusFilter" />
-        @click="toggleStatusFilter" />
-    </div>
   </div>
   <div>
     <div

web/app/src/components/workers/WorkersTable.vue

@@ -3,14 +3,11 @@
 
   <div class="btn-bar-group">
     <worker-actions-bar />
-
+    <status-filter-bar
-    <div class="align-right">
+      :availableStatuses="availableStatuses"
-      <status-filter-bar
+      :activeStatuses="shownStatuses"
-        :availableStatuses="availableStatuses"
+      classPrefix="worker-"
-        :activeStatuses="shownStatuses"
+      @click="toggleStatusFilter" />
-        classPrefix="worker-"
-        @click="toggleStatusFilter" />
-    </div>
   </div>
 
   <div>