Merge pull request #3783 from nhsuk/patient-session-layout-mobile

Fix layout of patient session for narrower viewports

Author: thomasleese

app/assets/stylesheets/_grid.scss

@@ -1,10 +1,23 @@
-// Search filters and results
-.app-grid-column-filters .nhsuk-card--feature.app-filters,
-.app-grid-column-results > .nhsuk-card--feature,
-.app-grid-column-results > .nhsuk-warning-callout {
-  margin-top: nhsuk-spacing(3);
+// Patient session and record
+.app-grid-column-patient-session {
+  @include nhsuk-grid-column(
+    three-quarters,
+    $float: right,
+    $at: large-desktop,
+    $class: false
+  );
+}
+
+.app-grid-column-patient-record {
+  @include nhsuk-grid-column(
+    one-quarter,
+    $float: right,
+    $at: large-desktop,
+    $class: false
+  );
 }
 
+// Search filters and results
 .app-grid-column-filters {
   @include nhsuk-grid-column(filters, $at: large-desktop, $class: false);
 }
@@ -13,6 +26,12 @@
   @include nhsuk-grid-column(results, $at: large-desktop, $class: false);
 }
 
+.app-grid-column-filters .nhsuk-card--feature.app-filters,
+.app-grid-column-results > .nhsuk-card--feature,
+.app-grid-column-results > .nhsuk-warning-callout {
+  margin-top: nhsuk-spacing(3);
+}
+
 // Sticky column
 .app-grid-column--sticky {
   @include nhsuk-media-query($from: desktop) {

app/views/patient_sessions/programmes/show.html.erb

@@ -1,7 +1,11 @@
 <%= render "patient_sessions/header" %>
 
 <div class="nhsuk-grid-row">
-  <div class="nhsuk-grid-column-three-quarters">
+  <div class="app-grid-column-patient-record">
+    <%= render AppPatientSummaryComponent.new(@patient) %>
+  </div>
+
+  <div class="app-grid-column-patient-session">
     <%= render AppPatientSessionConsentComponent.new(@patient_session, programme: @programme) %>
 
     <%= render AppPatientSessionTriageComponent.new(@patient_session, programme: @programme, triage: @triage) %>
@@ -10,8 +14,4 @@
 
     <%= render AppPatientSessionOutcomeComponent.new(@patient_session, programme: @programme) %>
   </div>
-
-  <div class="nhsuk-grid-column-one-quarter">
-    <%= render AppPatientSummaryComponent.new(@patient) %>
-  </div>
 </div>