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()) {

app/assets/stylesheets/legislation_process.scss

@@ -380,17 +380,26 @@
 
     @include breakpoint(medium) {
       display: flex;
-      padding-left: rem-calc(15);
-      padding-right: rem-calc(15);
-    }
 
-    @media screen and (min-width: 40em) {
       .calc-index {
-        width: calc(35% - 25px);
+        max-width: calc(35% - 25px);
+
+        > * {
+          padding-right: rem-calc(20);
+        }
       }
 
       .calc-text {
-        width: calc(65% - 25px);
+        flex: 1;
+      }
+
+      .calc-comments {
+        min-width: 15rem;
+        width: calc(35% - 25px);
+
+        > * {
+          padding-left: rem-calc(20);
+        }
       }
     }
 
@@ -467,6 +476,8 @@
       padding: rem-calc(16);
 
       @include breakpoint(medium) {
+        margin: 0 auto;
+        max-width: 3 * $grid-row-width / 4;
         padding: rem-calc(32) rem-calc(32) rem-calc(32) rem-calc(48);
       }
 
@@ -533,6 +544,7 @@
       }
 
       @include breakpoint(medium) {
+        min-width: auto;
         width: rem-calc(50);
 
         .draft-panel {
@@ -561,7 +573,6 @@
     }
 
     .calc-text {
-      width: calc(65% - 25px);
       border-right: 0;
 
       .show-comments {
@@ -581,7 +592,6 @@
     .calc-comments {
       background: #fff;
       cursor: auto;
-      width: calc(35% - 25px);
 
       @include breakpoint(small only) {
         summary {
@@ -594,12 +604,11 @@
       }
 
       .comments-box-container {
-        position: absolute;
+        position: relative;
-        top: rem-calc(230);
+        top: rem-calc(180);
       }
 
       .comment-box {
-        width: rem-calc(375);
         padding: rem-calc(4);
         background: #f9f9f9;
         border: 1px solid $border;

app/views/legislation/draft_versions/_comments_panel.html.erb

@@ -1,4 +1,4 @@
-<details open=open class="small-12 calc-comments end column">
+<details open=open class="calc-comments">
   <summary class="draft-panel">
     <span class="icon-comments" aria-hidden="true"></span>
     <span class="panel-title"><%= t("legislation.draft_versions.show.text_comments") %></span>

app/views/legislation/draft_versions/show.html.erb

@@ -42,8 +42,8 @@
 
     <%= render "legislation/processes/help_gif" %>
 
-    <div class="row draft-allegation medium-collapse">
+    <div class="draft-allegation">
-      <details class="small-12 calc-index column">
+      <details class="calc-index">
         <summary class="draft-panel">
           <span class="icon-banner" aria-hidden="true"></span>
           <span class="panel-title"><%= t("legislation.draft_versions.show.text_toc") %></span>
@@ -53,7 +53,7 @@
           <%= AdminLegislationSanitizer.new.sanitize(@draft_version.toc_html) %>
         </div>
       </details>
-      <div class="small-12 calc-text column border-right border-left">
+      <div class="calc-text border-right border-left">
         <div class="draft-panel">
           <div><span class="panel-title"><%= t("legislation.draft_versions.show.text_body") %></span></div>
         </div>
@@ -72,7 +72,7 @@
       </div>
 
       <% if @draft_version.final_version? %>
-        <div class="small-12 calc-comments end column"></div>
+        <div class="calc-comments"></div>
       <% else %>
         <%= render "comments_panel", draft_version: @draft_version %>
       <% end %>