From b477121ddafdecae1ea9c4822c56e97e230e3db5 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 15 Feb 2025 20:14:22 +0100
Subject: [PATCH] [web] Fix alignement in switch control

---
 web-src/src/components/ControlSetting.vue       |  4 ++--
 web-src/src/components/ControlSettingSwitch.vue |  6 +++---
 web-src/src/components/ControlSwitch.vue        | 17 ++++++++---------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/web-src/src/components/ControlSetting.vue b/web-src/src/components/ControlSetting.vue
index e7884ec8..63393d49 100644
--- a/web-src/src/components/ControlSetting.vue
+++ b/web-src/src/components/ControlSetting.vue
@@ -7,13 +7,13 @@
       <div class="control" :class="{ 'has-icons-right': isSuccess || isError }">
         <slot name="input" :setting="setting" :update="update" />
         <mdicon
-          v-if="isSuccess || isError"
+          v-if="$slots.label && (isSuccess || isError)"
           class="icon is-right"
           :name="isSuccess ? 'check' : 'close'"
           size="16"
         />
       </div>
-      <p v-if="$slots.help" class="help">
+      <p v-if="$slots.help" class="help mb-4">
         <slot name="help" />
       </p>
     </div>
diff --git a/web-src/src/components/ControlSettingSwitch.vue b/web-src/src/components/ControlSettingSwitch.vue
index c675bea6..adf6238f 100644
--- a/web-src/src/components/ControlSettingSwitch.vue
+++ b/web-src/src/components/ControlSettingSwitch.vue
@@ -10,11 +10,11 @@
         <template #label>
           <slot name="label" />
         </template>
-        <template #help>
-          <slot name="help" />
-        </template>
       </control-switch>
     </template>
+    <template v-if="$slots.help" #help>
+      <slot name="help" />
+    </template>
   </control-setting>
 </template>
 
diff --git a/web-src/src/components/ControlSwitch.vue b/web-src/src/components/ControlSwitch.vue
index 8a919932..2646f387 100644
--- a/web-src/src/components/ControlSwitch.vue
+++ b/web-src/src/components/ControlSwitch.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="field">
-    <label class="toggle">
-      <div class="control is-flex is-align-content-center">
+  <div class="field mb-0 is-flex is-align-items-center">
+    <label class="toggle is-flex is-align-items-center">
+      <div class="control is-flex is-align-items-center">
         <input
           :checked="modelValue"
           type="checkbox"
-          class="toggle-checkbox"
+          class="toggle-checkbox is-hidden"
           @change="$emit('update:modelValue', !modelValue)"
         />
         <div class="toggle-switch" />
-        <slot name="label" />
       </div>
     </label>
-    <div v-if="$slots.help" class="help">
-      <slot name="help" />
-    </div>
+    <slot name="label" />
+  </div>
+  <div v-if="$slots.help" class="help mb-4">
+    <slot name="help" />
   </div>
 </template>
 
@@ -64,7 +64,6 @@ export default {
 
   &-checkbox {
     position: absolute;
-    visibility: hidden;
 
     &:checked + .toggle-switch {
       background: var(--bulma-dark);