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
alphagov/govuk-design-system-backlog#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

@@ -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%;
+  }
+}

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";