anchor.diff:  <style>
     #commentitor, .ace_gutter, .ace_gutter-layer { overflow: visible }
     .popover { width: 400px; max-width: none; }
  -</style>+</style>
  
positive.code:   <h4 class="list-group-item-heading"><%= Exercise.find(@request_for_comment.exercise_id) %></h4>
    <p class="list-group-item-text">
        <%
  
             user = @request_for_comment.user
  
        %>
      <%= user %> | <%= @request_for_comment.requested_at %>
    </p>
  
negative.code: <!--
  do not put a carriage return in the line below. it will be present in the presentation of the source code, otherwise.
  -->
  <% submission.files.each do |file| %>
    <%= (file.path or "") + "/" + file.name +  file.file_type.file_extension %>
    <div id='commentitor' class='editor' data-read-only='true' data-file-id='<%=file.id%>'><%= file.content %>
    </div>
  <% end %>
  
  <script type="text/javascript">
    //(function() {
      var commentitor = $('.editor');
      var userid = commentitor.data('user-id');
  
      commentitor.each(function (index, editor) {
        currentEditor = ace.edit(editor);
        currentEditor.setReadOnly(true);
  
        setAnnotations(currentEditor, $(editor).data('file-id'));
      });
  
      function setAnnotations(editor, fileid) {
        var session = editor.getSession()
  
        var inputHtml = ''
        inputHtml += '<div class="input-group">'
        inputHtml +=   '<input type="text" class="form-control" id="commentInput' + fileid + '" '
        inputHtml +=     'placeholder="I\'d suggest a variable here" required>'
        inputHtml +=   '<span class="input-group-btn"><button id="submitComment' + fileid + '" '
        inputHtml +=     'class="btn btn-default"><%= t("exercises.implement.comment.addComment") %>!</button></span>'
        inputHtml += '</div>'
  
        var jqrequest = $.ajax({
            dataType: 'json',
  