From 790159d735268e02788444058d7c778ae2b85d2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Tue, 19 Aug 2025 16:14:12 +0200
Subject: [PATCH] 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                     | 13 ++-----------
 web/app/src/components/jobs/JobActionsBar.vue   |  9 +++++++--
 web/app/src/components/jobs/JobsTable.vue       | 10 ++++------
 web/app/src/components/jobs/TasksTable.vue      | 10 ++++------
 web/app/src/components/workers/WorkersTable.vue | 13 +++++--------
 5 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index c20f39d8..592c18a5 100644
--- a/web/app/src/assets/base.css
+++ b/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 {
diff --git a/web/app/src/components/jobs/JobActionsBar.vue b/web/app/src/components/jobs/JobActionsBar.vue
index 9d506800..58b49f9f 100644
--- a/web/app/src/components/jobs/JobActionsBar.vue
+++ b/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;
diff --git a/web/app/src/components/jobs/JobsTable.vue b/web/app/src/components/jobs/JobsTable.vue
index 3dc91948..413630d1 100644
--- a/web/app/src/components/jobs/JobsTable.vue
+++ b/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
-        :availableStatuses="availableStatuses"
-        :activeStatuses="shownStatuses"
-        @click="toggleStatusFilter" />
-    </div>
+    <status-filter-bar
+      :availableStatuses="availableStatuses"
+      :activeStatuses="shownStatuses"
+      @click="toggleStatusFilter" />
   </div>
   <div>
     <div class="job-list with-clickable-row" id="flamenco_job_list"></div>
diff --git a/web/app/src/components/jobs/TasksTable.vue b/web/app/src/components/jobs/TasksTable.vue
index 112cd864..c41890c1 100644
--- a/web/app/src/components/jobs/TasksTable.vue
+++ b/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
-        :availableStatuses="availableStatuses"
-        :activeStatuses="shownStatuses"
-        @click="toggleStatusFilter" />
-    </div>
+    <status-filter-bar
+      :availableStatuses="availableStatuses"
+      :activeStatuses="shownStatuses"
+      @click="toggleStatusFilter" />
   </div>
   <div>
     <div
diff --git a/web/app/src/components/workers/WorkersTable.vue b/web/app/src/components/workers/WorkersTable.vue
index f9e1f458..6da145ed 100644
--- a/web/app/src/components/workers/WorkersTable.vue
+++ b/web/app/src/components/workers/WorkersTable.vue
@@ -3,14 +3,11 @@
 
   <div class="btn-bar-group">
     <worker-actions-bar />
-
-    <div class="align-right">
-      <status-filter-bar
-        :availableStatuses="availableStatuses"
-        :activeStatuses="shownStatuses"
-        classPrefix="worker-"
-        @click="toggleStatusFilter" />
-    </div>
+    <status-filter-bar
+      :availableStatuses="availableStatuses"
+      :activeStatuses="shownStatuses"
+      classPrefix="worker-"
+      @click="toggleStatusFilter" />
   </div>
 
   <div>