From 739f02b1f69946a70ebcefdc06745cc83b29e5ab Mon Sep 17 00:00:00 2001
From: Paul Robert Lloyd <me+git@paulrobertlloyd.com>
Date: Thu, 19 Jun 2025 11:57:59 +0100
Subject: [PATCH] Fix layout of patient session for narrower viewports

---
 app/assets/stylesheets/_grid.scss             | 29 +++++++++++++++----
 .../patient_sessions/programmes/show.html.erb | 10 +++----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/_grid.scss b/app/assets/stylesheets/_grid.scss
index 0b88c722de..c29c470639 100644
--- a/app/assets/stylesheets/_grid.scss
+++ b/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) {
diff --git a/app/views/patient_sessions/programmes/show.html.erb b/app/views/patient_sessions/programmes/show.html.erb
index c8e22a790a..083ff37626 100644
--- a/app/views/patient_sessions/programmes/show.html.erb
+++ b/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>