Fix checklist item alignments and placeholder text [SCI-6961] (#4211)

app/assets/stylesheets/steps/components/checklist.scss

@@ -2,6 +2,15 @@
 // scss-lint:disable NestingDepth
 
 .step-checklist-items {
+  .sci-inline-edit {
+    margin-top: 2px;
+
+    .sci-inline-edit__content {
+      padding-bottom: 7px;
+      padding-top: 7px;
+    }
+  }
+
   .step-element-header {
     .step-element-name {
       align-items: flex-start;
@@ -26,6 +35,10 @@
 
   .step-checklist-add-item {
     margin-left: 9px;
+
+    .fas {
+      margin-right: .5em;
+    }
   }
 
   .step-checklist-item-ghost {

app/javascript/vue/protocol/step_elements/checklistItem.vue

@@ -19,11 +19,12 @@
             :value="checklistItem.attributes.text"
             :sa_value="checklistItem.attributes.sa_text"
             :characterLimit="10000"
-            :placeholder="''"
+            :placeholder="'Add a checklist item...'"
             :allowBlank="true"
             :autofocus="editingText"
             :attributeName="`${i18n.t('ChecklistItem')} ${i18n.t('name')}`"
             :multilinePaste="true"
+            :editOnload="newItem()"
             :smartAnnotation="true"
             @editingEnabled="enableTextEdit"
             @editingDisabled="disableTextEdit"
@@ -130,6 +131,9 @@
           this.$emit('removeItem', this.checklistItem.attributes.position);
         }
       },
+      newItem(){
+        return this.checklistItem.attributes.text === ''
+      },
       update() {
         this.$emit('update', this.checklistItem);
       }

app/javascript/vue/shared/inline_edit.vue

@@ -84,7 +84,7 @@
     },
     methods: {
       handleAutofocus() {
-        if (this.autofocus || !this.placeholder && this.isBlank) {
+        if (this.autofocus || !this.placeholder && this.isBlank || this.editOnload && this.isBlank) {
           this.enableEdit();
           setTimeout(this.focus, 50);
         }