From 947d7c4351637d2ba2c69457449c72414e404230 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Fri, 28 Sep 2018 17:42:20 +0100
Subject: [PATCH] Styles to contain tables on mobile view.

This modifies the width of columns to allow all the content to
display on mobile viewport.

There's been some interesting discussion in
https://github.com/alphagov/govuk-design-system-backlog/issues/61
about responsive tables so hopefully we'll soon be able to have
a better solution for making tables responsive.
---
 src/stylesheets/components/_options.scss | 29 ++++++++++++++++++++++++
 src/stylesheets/main.scss                |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 src/stylesheets/components/_options.scss

diff --git a/src/stylesheets/components/_options.scss b/src/stylesheets/components/_options.scss
new file mode 100644
index 0000000000..6da71d123f
--- /dev/null
+++ b/src/stylesheets/components/_options.scss
@@ -0,0 +1,29 @@
+.app-options {
+  max-width: 38em;
+  margin-bottom: govuk-spacing(1);
+  padding: govuk-spacing(2) govuk-spacing(2) 0 govuk-spacing(2);
+  background-color: govuk-colour("white");
+
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: govuk-spacing(4);
+    padding: govuk-spacing(5) govuk-spacing(5) 0 govuk-spacing(5);
+  }
+}
+
+.app-options__table {
+  @include govuk-media-query(mobile) {
+    table-layout: fixed;
+
+    .govuk-table__header,
+    .govuk-table__cell {
+      padding-right: govuk-spacing(2);
+      word-break: break-word;
+    }
+  }
+}
+
+.app-options__limit-table-cell {
+  @include govuk-media-query(mobile) {
+    width: 29%;
+  }
+}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index e752f0def7..0cebdea5f9 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -15,6 +15,7 @@ $app-code-color: #dd1144;
 @import "components/masthead";
 @import "components/mobile-navigation";
 @import "components/navigation";
+@import "components/options";
 @import "components/page-navigation";
 @import "components/pane";
 @import "components/site-search";