Fix elements step elements alignment [SCI-6959]

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

@@ -9,6 +9,8 @@
       padding-bottom: 7px;
       padding-top: 7px;
     }
+  .step-checklist-item {
+    padding-left: var(--left-component-padding);
   }
 
   .step-element-header {

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

@@ -3,7 +3,7 @@
 
   .step-table {
     border: $border-transparent;
-    margin-left: 20px;
+    margin-left: var(--left-component-padding);
     padding: 4px;
     position: relative;
 

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

@@ -1,7 +1,7 @@
 .step-text-container {
   display: block;
   margin-bottom: 16px;
-  padding-left: 1.5em;
+  padding-left: var(--left-component-padding);
   position: relative;
   width: calc(100% + 16px);
 

app/assets/stylesheets/steps/step.scss

@@ -4,6 +4,7 @@
 @import "components/*";
 
 .step-container {
+  --left-component-padding: 24px;
   border: $border-transparent;
   margin: 6px 0 6px -1.5em;
   padding: 8px 24px 8px 0;
@@ -58,45 +59,32 @@
 
     .step-name-container {
       flex-grow: 1;
+      font-size: 16px;
       font-weight: bold;
 
       textarea {
         text-decoration: initial;
       }
+    }
 
-      .step-state {
-        border: 2px solid $color-alto;
-        border-radius: 50%;
-        cursor: pointer;
-        height: 24px;
-        text-align: center;
-        width: 24px;
+    .step-state {
+      border: 2px solid $color-alto;
+      border-radius: 50%;
+      cursor: pointer;
+      height: 24px;
+      text-align: center;
+      width: 24px;
 
-        &.completed {
-          background: $brand-success;
-          border: 2px solid $brand-success;
+      &.completed {
+        background: $brand-success;
+        border: 2px solid $brand-success;
 
-          &::after {
-            @include font-awesome;
-            color: $color-white;
-            content: $font-fas-check;
-          }
+        &::after {
+          @include font-awesome;
+          color: $color-white;
+          content: $font-fas-check;
         }
       }
-
-      .step-position {
-        @include font-main;
-        flex-shrink: 0;
-        font-weight: bold;
-        line-height: 24px;
-        margin: 0 4px;
-      }
-
-      .step-name-container {
-        flex-grow: 1;
-        font-size: 16px;
-        font-weight: bold;
-      }
     }
 
     .step-actions-container {
@@ -146,7 +134,12 @@
   }
 
   .step-elements {
-    padding-left: 24px;
+    padding-left: calc(var(--left-component-padding) * 2);
+
+    .step-element-grip-placeholder {
+      height: 24px;
+      width: 28px;
+    }
   }
 
   .comments-counter {

app/assets/stylesheets/steps/step_attachments.scss

@@ -7,6 +7,10 @@
 }
 
 .step-container {
+  .step-attachments {
+    padding-left: 28px;
+  }
+
   .attachments-actions {
     align-items: center;
     display: flex;

app/javascript/vue/protocol/attachments.vue

@@ -2,7 +2,7 @@
   <div v-if="attachments.length" class="step-attachments">
     <div class="attachments-actions">
       <div class="title">
-        <h4>{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}</h4>
+        <h3>{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}</h3>
       </div>
       <div class="actions">
         <div class="dropdown sci-dropdown">

app/javascript/vue/protocol/step_elements/checklist.vue

@@ -4,6 +4,7 @@
       <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>
       <div class="step-element-name">
         <InlineEdit
           v-if="element.attributes.orderable.urls.update_url"

app/javascript/vue/protocol/step_elements/table.vue

@@ -4,6 +4,7 @@
       <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>
       <div class="step-element-name">
         <InlineEdit
           v-if="element.attributes.orderable.urls.update_url"

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

@@ -3,6 +3,7 @@
     <div v-if="reorderElementUrl" class="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>
     <div class="buttons-container">
       <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" tabindex="-1" @click="enableEditMode($event)">
         <i class="fas fa-pen"></i>