From 95b5a792b4249d5e8203c1c8f1ae8dd57456c74c Mon Sep 17 00:00:00 2001
From: EdwardScull <edsc1@hscic.gov.uk>
Date: Thu, 18 Jul 2024 16:50:39 +0100
Subject: [PATCH] summary list styling

---
 src/all.scss                            |  1 +
 src/components/summary-list/_index.scss | 34 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/summary-list/_index.scss

diff --git a/src/all.scss b/src/all.scss
index edea48d..9340490 100644
--- a/src/all.scss
+++ b/src/all.scss
@@ -9,6 +9,7 @@
 @import "components/card/card";
 @import "components/tag/tag";
 @import "components/timeline/timeline";
+@import "components/summary-list";
 
 // utilities
 @import "utilities/truncate";
diff --git a/src/components/summary-list/_index.scss b/src/components/summary-list/_index.scss
new file mode 100644
index 0000000..8c647b9
--- /dev/null
+++ b/src/components/summary-list/_index.scss
@@ -0,0 +1,34 @@
+.nhsapp-summary-list {
+  // Override the NHS UK Frontend summary list component to display two columns on mobile
+  &--two-columns-mobile {
+    @include mq($until: tablet) {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+    }
+
+    .nhsuk-summary-list__key,
+    .nhsuk-summary-list__value,
+    .nhsuk-summary-list__actions {
+      border-bottom: 1px solid $nhsuk-border-color;
+      display: table-cell;
+      padding-bottom: nhsuk-spacing(2);
+      padding-right: nhsuk-spacing(4);
+      padding-top: nhsuk-spacing(2);
+    }
+
+    .nhsuk-summary-list__row {
+      display: table-row;
+    }
+
+    .nhsuk-summary-list__key {
+      @include mq($until: tablet) {
+        width: 50%;
+      }
+    }
+
+    .nhsuk-summary-list__value {
+      width: 50%;
+    }
+  }
+}