From 0d57d1e84dee4ccc182eae3893d49d3fe090c7f9 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 11:12:14 +0200
Subject: [PATCH] Webapp: use flexbox styling to handle button spacing

Instead of setting `margin-left` on all but the first button, use the
`gap` property to set the inter-button gap. This works properly when
buttons rewrap.
---
 web/app/src/assets/base.css                   | 13 ++-------
 .../components/workers/WorkerActionsBar.vue   | 28 ++++++++++---------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 6fc125c8..c20f39d8 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -347,6 +347,8 @@ dl dd:empty {
 .btn-bar {
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--spacer-sm) / 3) var(--spacer-sm);
   padding: var(--spacer-sm) 0;
 }
 
@@ -371,13 +373,6 @@ dl dd:empty {
   padding: 0;
 }
 
-.btn-bar-group select+.btn,
-.btn-bar-group select+button,
-.btn-bar-group .btn+select,
-.btn-bar-group button+select {
-  margin-left: var(--spacer-sm)
-}
-
 label {
   display: block;
 }
@@ -458,10 +453,6 @@ button, input[type='button'], .btn {
   width: 100%;
 }
 
-.btn-bar .btn+.btn,
-.btn-bar button+button {
-  margin-left: var(--spacer-sm);
-}
 
 button[disabled],
 input[type='button'][disabled],
diff --git a/web/app/src/components/workers/WorkerActionsBar.vue b/web/app/src/components/workers/WorkerActionsBar.vue
index a83ddd64..a0b69dc5 100644
--- a/web/app/src/components/workers/WorkerActionsBar.vue
+++ b/web/app/src/components/workers/WorkerActionsBar.vue
@@ -1,18 +1,20 @@
 <template>
-  <select v-model="selectedAction">
-    <option value="" selected>
-      <template v-if="!workers.selectedWorkers.length">Select a Worker</template>
-      <template v-else>Choose an action...</template>
-    </option>
-    <template v-for="(action, key) in WORKER_ACTIONS">
-      <option :key="action.label" :value="key" v-if="action.condition()">
-        {{ action.label }}
+  <div class="btn-bar workers">
+    <select v-model="selectedAction">
+      <option value="" selected>
+        <template v-if="!workers.selectedWorkers.length">Select a Worker</template>
+        <template v-else>Choose an action...</template>
       </option>
-    </template>
-  </select>
-  <button :disabled="!canPerformAction" class="btn" @click.prevent="performWorkerAction">
-    Apply
-  </button>
+      <template v-for="(action, key) in WORKER_ACTIONS">
+        <option :key="action.label" :value="key" v-if="action.condition()">
+          {{ action.label }}
+        </option>
+      </template>
+    </select>
+    <button :disabled="!canPerformAction" class="btn" @click.prevent="performWorkerAction">
+      Apply
+    </button>
+  </div>
 </template>
 
 <script setup>