Merge pull request #2438 from alphagov/scrollable-spreadsheet

Make the example spreadsheet scroll horizontally

app/assets/javascripts/fullscreenTable.js

@@ -30,6 +30,8 @@
         window.GOVUK.stopScrollingAtFooter.updateFooterTop();
       }
 
+      this.maintainWidth();
+
     };
 
     this.insertShims = () => {

app/assets/stylesheets/app.scss

@@ -147,6 +147,10 @@ details summary {
 
   margin-bottom: -$gutter;
 
+  .table {
+    margin-bottom: 0;
+  }
+
   th,
   .table-field-index {
     background: $grey-4;
@@ -161,7 +165,21 @@ details summary {
   }
 
   td {
+
     border-top: 0;
+    // 194 is the width of the table * 1/3.5, so the overflow cuts off
+    // at 3.5 columns wide.
+    // 11 accounts for the padding of the table cell
+    min-width: 194px - 11px;
+
+    &:first-child {
+      min-width: auto;
+    }
+
+  }
+
+  .fullscreen-fixed-table {
+    z-index: 1000;
   }
 
 }

app/templates/views/send.html

@@ -29,7 +29,8 @@
     <acronym title="Open Document Spreadsheet">ODS</acronym>,
     or Microsoft Excel spreadsheet
   </p>
-  <div class="spreadsheet">
+
+  <div class="spreadsheet" data-module="fullscreen-table">
     {% call(item, row_number) list_table(
       example,
       caption="Example",