Fix step comments [SCI-6971]

app/assets/javascripts/sitewide/comments_sidebar.js

@@ -52,6 +52,7 @@ var CommentsSidebar = (function() {
     $(document).on('click', `${SIDEBAR} .scroll-page-with-anchor`, function(e) {
       e.preventDefault();
       $($(this).attr('href'))[0].scrollIntoView();
+      window.scrollBy(0, -130);
     });
   }
 

app/assets/stylesheets/shared/comments_sidebar.scss

@@ -35,6 +35,7 @@
 
       .comments-subject-title {
         @include font-h3;
+        flex-basis: calc(100% - 36px);
         flex-grow: 1;
         height: 2em;
         line-height: 2em;
@@ -211,7 +212,9 @@
         justify-content: flex-end;
 
         .user-avatar {
+          border-radius: 50%;
           order: 3;
+          overflow: hidden;
         }
       }
     }

app/javascript/vue/protocol/step.vue

@@ -82,7 +82,7 @@
            class="open-comments-sidebar btn icon-btn btn-light"
            data-turbolinks="false"
            data-object-type="Step"
-           @click="showCommentsSidebar = true"
+           @click="openCommentsSidebar"
            :data-object-id="step.id">
           <i class="fas fa-comment"></i>
           <span class="comments-counter"
@@ -230,6 +230,7 @@
     },
     mounted() {
       $(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar);
+      $(this.$refs.comments).data('openCallback', this.closeCommentsSidebar);
       $(this.$refs.actionsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', this.handleDropdownPosition);
     },
     computed: {
@@ -367,6 +368,10 @@
       addAttachment(attachment) {
         this.attachments.push(attachment);
       },
+      openCommentsSidebar() {
+        $('.comments-sidebar .close-btn').click();
+        this.showCommentsSidebar = true
+      },
       closeCommentsSidebar() {
         this.showCommentsSidebar = false
       },