scinote-web/app/views/shareable_links/my_modules/_step.html.erb

<div class="step-container" id="stepContainer<%= step.id %>" >
  <div class="step-header">
    <div class="step-element-header no-hover">
      <div class="flex items-center gap-4">
        <a class="step-collapse-link hover:no-underline focus:no-underline"
          href="#stepBody<%= step.id %>"
          data-toggle="collapse"
          data-remote="true">
            <span class="sn-icon sn-icon-right "></span>
        </a>
        <div class="step-complete-container step-element--locked">
          <div class="step-state <%= step.completed ? 'completed' : '' %>"
               tabindex="0"
          ></div>
        </div>
        <div class="step-position">
          <%= step.position + 1 %>.
        </div>
      </div>

      <div class="step-name-container basis-[calc(100%_-_100px)] relative">
        <%= render partial: "shareable_links/my_modules/inline_view", locals: { text: step.name, smart_annotation_enabled: false } %>
        <span class="mt-2 whitespace-nowrap truncate text-xs font-normal w-full absolute -bottom-5"><%= t('protocols.steps.timestamp_iso_html', date: step.created_at.iso8601, user: step.user.full_name) %></span>
      </div>
    </div>
    <div class="elements-actions-container">
      <a href="#"
         class="shareable-link-open-comments-sidebar btn icon-btn btn-light"
         data-turbolinks="false"
         data-object-type="Step"
         data-object-id="<%= step.id %>"
         data-object-target="#Step<%= step.id %>">
        <i class="sn-icon sn-icon-comments"></i>
        <span class="comments-counter"
              id="comment-count-<%= step.id %>"
        >
          <%= step.comments.count %>
        </span>
      </a>
    </div>
  </div>

  <div class="collapse in" id="stepBody<%= step.id %>">
    <div class="step-elements">
      <% step.step_orderable_elements.sort_by(&:position).each do |element| %>
        <% if element.orderable_type == 'StepText' %>
          <%= render partial: "shareable_links/my_modules/step_elements/text", locals: { element: element.orderable } %>
        <% elsif element.orderable_type == 'Checklist' %>
          <%= render partial: "shareable_links/my_modules/step_elements/checklist", locals: { element: element.orderable } %>
        <% elsif element.orderable_type == 'StepTable'%>
           <%= render partial: "shareable_links/my_modules/step_elements/table", locals: { element: element.orderable.table } %>
        <% end %>
      <% end %>
      <% if step.step_assets.present? %>
        <%= render partial: "shareable_links/my_modules/attachments", locals: { attachments: step.assets } %>
      <% end %>
    </div>
  </div>
  <div class="sci-divider my-6"></div>
</div>