Make child record on patient session page responsive

Author: paulrobertlloyd

app/assets/stylesheets/components/_summary-list.scss

@@ -1,6 +1,6 @@
 @use "../vendor/nhsuk-frontend" as *;
 
-.app-summary-list--full-width {
+@mixin _app-summary-list-full-width {
   .nhsuk-summary-list__row {
     display: block;
     padding-top: nhsuk-spacing(2);
@@ -28,3 +28,13 @@
     padding-top: nhsuk-spacing(1);
   }
 }
+
+.app-summary-list--full-width {
+  @include _app-summary-list-full-width;
+}
+
+.app-summary-list--full-width-at-large-desktop {
+  @include nhsuk-media-query($from: large-desktop) {
+    @include _app-summary-list-full-width;
+  }
+}

app/views/patient-session/show.njk

@@ -22,16 +22,7 @@
   <div class="nhsuk-grid-row">
     <div class="app-grid-column-patient-record" data-module="app-sticky">
       {{ summaryList({
-        card: {
-          heading: patientSession.patient.fullName,
-          headingClasses: "nhsuk-u-margin-bottom-2",
-          headingLevel: 3,
-          headingSize: "s",
-          href: patient.uri + "?referrer=" + referrer,
-          secondary: true
-        },
-        classes: "app-summary-list--full-width",
-        border: false,
+        classes: "app-summary-list--full-width-at-large-desktop",
         rows: summaryRows(patient, {
           nhsn: {
             changeLabel: "the child’s NHS number",