From 54bd321504a8357c020a4c497daa357caef692fd Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 1 Nov 2018 15:31:14 +0000
Subject: [PATCH] Make the example spreadsheet scroll horizontally

This replicates how we let large spreadsheets scroll horizontally.

Pro: this looks nicer and is more usable

Con: the code for this feels a bit fragile, especially the calling of
`.maintainWidth` twice, ie as many times as a it takes to get stuff to
render properly.
---
 app/assets/javascripts/fullscreenTable.js |  2 ++
 app/assets/stylesheets/app.scss           | 18 ++++++++++++++++++
 app/templates/views/send.html             |  3 ++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js
index f4ef998b6..5a690022b 100644
--- a/app/assets/javascripts/fullscreenTable.js
+++ b/app/assets/javascripts/fullscreenTable.js
@@ -30,6 +30,8 @@
         window.GOVUK.stopScrollingAtFooter.updateFooterTop();
       }
 
+      this.maintainWidth();
+
     };
 
     this.insertShims = () => {
diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index ccc81098c..bb05a1c2a 100644
--- a/app/assets/stylesheets/app.scss
+++ b/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;
   }
 
 }
diff --git a/app/templates/views/send.html b/app/templates/views/send.html
index 4be8b8807..21666fef4 100644
--- a/app/templates/views/send.html
+++ b/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",