Step element header style fixes [SCI-6996] (#4268)

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

@@ -1,5 +1,6 @@
 .step-text-container {
   display: flex;
+  border-radius: 4px;
   margin-bottom: 16px;
   padding-left: var(--left-component-padding);
   position: relative;
@@ -23,7 +24,7 @@
   }
 
 
-  .element-grip {
+  .step-element-grip {
     align-items: center;
     color: $color-silver-chalice;
     display: none;
@@ -41,14 +42,14 @@
       display: flex;
     }
 
-    .element-grip {
+    .step-element-grip {
       display: flex;
     }
   }
 
   &.edit {
     .buttons-container,
-    .element-grip {
+    .step-element-grip {
       display: none;
     }
   }

app/assets/stylesheets/steps/step.scss

@@ -145,6 +145,18 @@
 
   .step-elements {
     padding-left: calc(var(--left-component-padding) * 2);
+
+    .step-element-name {
+      .sci-inline-edit__view {
+        margin-bottom: .25em;
+        padding-top: .25em;
+      }
+
+      .sci-inline-edit__content textarea {
+        margin-bottom: .25em;
+        margin-top: .25em;
+      }
+    }
   }
 
   .step-element-grip-placeholder {
@@ -232,6 +244,7 @@
 
 .step-element-header {
   align-items: flex-start;
+  border-radius: 4px;
   display: flex;
   min-height: 40px;
   position: relative;
@@ -281,13 +294,6 @@
     }
   }
 
-  .step-element-grip {
-    color: $color-silver-chalice;
-    cursor: grab;
-    margin: auto;
-    padding: .5em;
-  }
-
   .step-element-controls,
   .step-element-grip {
     opacity: 0;
@@ -303,6 +309,17 @@
   }
 }
 
+.step-element-grip {
+  color: $color-silver-chalice;
+  cursor: pointer;
+  margin: auto;
+  padding: .5em;
+
+  &.step-element-grip--draggable {
+    cursor: grab;
+  }
+}
+
 .sci-reorderable-items {
   .modal-body {
     padding-top: 0;

app/javascript/vue/protocol/modals/reorderable_items_modal.vue

@@ -17,7 +17,7 @@
             :handle="'.step-element-grip'"
           >
             <div v-for="(item, index) in reorderedItems" :key="item.id" class="step-element-header">
-              <div class="step-element-grip">
+              <div class="step-element-grip step-element-grip--draggable">
                 <i class="fas fa-grip-vertical"></i>
               </div>
               <div class="step-element-name">

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

@@ -1,7 +1,7 @@
 <template>
   <div class="step-checklist-item">
     <div class="step-element-header" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
-      <div v-if="reorderChecklistItemUrl" class="step-element-grip">
+      <div v-if="reorderChecklistItemUrl" class="step-element-grip step-element-grip--draggable">
         <i class="fas fa-grip-vertical"></i>
       </div>
       <div class="step-element-name" :class="{ 'done': checklistItem.attributes.checked }">

app/javascript/vue/protocol/step_elements/text.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="step-text-container" :class="{ 'edit': inEditMode }" @keyup.enter="enableEditMode($event)" tabindex="0">
-    <div v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')">
+    <div v-if="reorderElementUrl" class="step-element-grip" @click="$emit('reorder')">
       <i class="fas fas-rotated-90 fa-exchange-alt"></i>
     </div>
     <div v-else class="step-element-grip-placeholder"></div>