From 1b84d2460f4fe1c7faa0f336fed86dd897ec1184 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 6 May 2023 08:47:30 +0200
Subject: [PATCH] Improve layout (confirm always to the right)

---
 src/components/charts/PlotConfigurator.vue | 23 +++++++++---------
 src/components/charts/PlotIndicator.vue    | 28 +++++++++++-----------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/components/charts/PlotConfigurator.vue b/src/components/charts/PlotConfigurator.vue
index c084ee19..75ab65d4 100644
--- a/src/components/charts/PlotConfigurator.vue
+++ b/src/components/charts/PlotConfigurator.vue
@@ -32,26 +32,27 @@
         </b-form-select>
       </b-form-group>
     </div>
-    <div>
-      <b-button
-        variant="primary"
-        title="Add indicator to plot"
-        size="sm"
-        :disabled="addNewIndicator"
-        @click="addNewIndicator = !addNewIndicator"
-      >
-        Add new indicator
-      </b-button>
+    <div class="d-flex flex-row mt-1">
       <b-button
         variant="secondary"
         title="Remove indicator to plot"
         size="sm"
         :disabled="!selIndicatorName"
-        class="ms-1"
+        class="col"
         @click="removeIndicator"
       >
         Remove indicator
       </b-button>
+      <b-button
+        variant="primary"
+        title="Add indicator to plot"
+        size="sm"
+        class="ms-1 col"
+        :disabled="addNewIndicator"
+        @click="addNewIndicator = !addNewIndicator"
+      >
+        Add new indicator
+      </b-button>
     </div>
 
     <PlotIndicator
diff --git a/src/components/charts/PlotIndicator.vue b/src/components/charts/PlotIndicator.vue
index 8a202e57..f4d14031 100644
--- a/src/components/charts/PlotIndicator.vue
+++ b/src/components/charts/PlotIndicator.vue
@@ -21,8 +21,8 @@
         </b-form-select>
       </b-form-group>
     </div>
-    <div class="d-xl-flex flex-row flex-grow-1 justify-content-between mt-1">
-      <b-form-group class="" label="Type" label-for="plotTypeSelector">
+    <div class="d-flex flex-col flex-xl-row justify-content-between mt-1">
+      <b-form-group class="col flex-grow-1" label="Type" label-for="plotTypeSelector">
         <b-form-select
           id="plotTypeSelector"
           v-model="graphType"
@@ -32,7 +32,7 @@
         >
         </b-form-select>
       </b-form-group>
-      <b-form-group label="Color" label-for="colsel" size="sm" class="ms-xl-1 flex-shrink-1">
+      <b-form-group label="Color" label-for="colsel" size="sm" class="ms-xl-1 col">
         <b-input-group>
           <b-input-group-prepend>
             <div :style="{ 'background-color': selColor }" class="colorbox me-1"></div>
@@ -57,17 +57,7 @@
     <div class="d-flex flex-row mt-2">
       <b-button
         v-if="addNew"
-        class="flex-grow-1"
-        variant="primary"
-        title="Add "
-        size="sm"
-        @click="emitIndicator"
-      >
-        Save indicator
-      </b-button>
-      <b-button
-        v-if="addNew"
-        class="ms-1 flex-grow-1"
+        class="col"
         variant="secondary"
         title="Add "
         size="sm"
@@ -75,6 +65,16 @@
       >
         Cancel
       </b-button>
+      <b-button
+        v-if="addNew"
+        class="ms-1 col"
+        variant="primary"
+        title="Add "
+        size="sm"
+        @click="emitIndicator"
+      >
+        Save indicator
+      </b-button>
     </div>
   </div>
 </template>