Make draft version content use the empty space

Now that comments and TOC can be closed at the same time, we use a flex
layout so the main content uses the available width.

We're also making the comments work better on medium-sized screens,
since previously they had a fixed width and now the width is adapted to
the size of the screen.

Since now the comment box element has a relative position instead of an
absolute one, we need to consider the draft panel height when
calculating the comment box position.

app/assets/javascripts/legislation_annotatable.js

@@ -40,8 +40,10 @@
     },
     renderAnnotationComments: function(event) {
       if (event.offset) {
+        var default_top = $(".calc-comments").offset().top + $(".calc-comments .draft-panel").outerHeight();
+
         $("#comments-box").css({
-          top: event.offset - $(".calc-comments").offset().top
+          top: event.offset - default_top
         });
       }
       if (App.LegislationAnnotatable.isMobile()) {