put help text in line with the boolean toggle

Author: ahmedhamidawan

client/src/components/Form/FormElement.vue

@@ -190,6 +190,7 @@ const nonMdHelp = computed(() =>
         ? sanitize(helpText.value!)
         : ""
 );
+const showNonMdHelp = computed(() => !!nonMdHelp.value && (!props.workflowRun || props.type !== "boolean"));
 
 const currentValue = computed({
     get() {
@@ -341,7 +342,13 @@ function onAlert(value: string | undefined) {
             <FormError v-if="props.workflowRun && hasAlert && !unPopulatedError" :alerts="alerts" has-alert-class />
 
             <div v-if="showField" class="ui-form-field" :data-label="props.title">
-                <FormBoolean v-if="props.type === 'boolean'" :id="props.id" v-model="currentValue" />
+                <div
+                    v-if="props.type === 'boolean'"
+                    :class="{ 'd-flex align-items-start flex-gapx-1': props.workflowRun && nonMdHelp }">
+                    <FormBoolean :id="props.id" v-model="currentValue" class="mr-2" />
+                    <!-- eslint-disable-next-line vue/no-v-html -->
+                    <span v-if="props.workflowRun && nonMdHelp" class="text-muted" v-html="nonMdHelp" />
+                </div>
                 <FormHidden v-else-if="isHiddenType" :id="props.id" v-model="currentValue" :info="attrs['info']" />
                 <FormNumber
                     v-else-if="props.type === 'integer' || props.type === 'float'"
@@ -440,7 +447,7 @@ function onAlert(value: string | undefined) {
 
             <div v-if="showPreview" class="ui-form-preview pt-1 pl-2 mt-1">{{ previewText }}</div>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <span v-if="nonMdHelp" class="ui-form-info form-text text-muted" v-html="nonMdHelp" />
+            <span v-if="showNonMdHelp" class="ui-form-info form-text text-muted" v-html="nonMdHelp" />
             <span v-else-if="Boolean(helpText) && helpFormat === 'markdown'" class="ui-form-info form-text text-muted">
                 <FormElementHelpMarkdown :content="helpText ?? ''" />
             </span>