From db0f2b2e3cd8d681370c47d5de4b3a3d2b4b7484 Mon Sep 17 00:00:00 2001
From: Simon Evans <simon.evans@torchbox.com>
Date: Thu, 4 Jan 2024 11:50:39 +0000
Subject: [PATCH] Fix layout for related courses

---
 .../patterns/pages/courses/course_detail_page.html         | 7 +++++--
 tbx/static_src/sass/components/_related-courses.scss       | 3 +++
 tbx/static_src/sass/main.scss                              | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 tbx/static_src/sass/components/_related-courses.scss

diff --git a/tbx/project_styleguide/templates/patterns/pages/courses/course_detail_page.html b/tbx/project_styleguide/templates/patterns/pages/courses/course_detail_page.html
index 33991b9f7..dbf13a7a4 100644
--- a/tbx/project_styleguide/templates/patterns/pages/courses/course_detail_page.html
+++ b/tbx/project_styleguide/templates/patterns/pages/courses/course_detail_page.html
@@ -26,8 +26,11 @@ <h1 class="title-block__heading title-block__heading--course">
     {% include_block page.body %}
 
     {% if page.related_courses %}
-        <div class="contain-me">
-            {% include "patterns/molecules/course-grid/course-grid.html" with cards=page.related_courses %}
+        <div class="streamfield">
+            <div class="related-courses">
+                <h2 class="course-grid-title">Related courses:</h2>
+                {% include "patterns/molecules/course-grid/course-grid.html" with cards=page.related_courses %}
+            </div>
         </div>
     {% endif %}
 
diff --git a/tbx/static_src/sass/components/_related-courses.scss b/tbx/static_src/sass/components/_related-courses.scss
new file mode 100644
index 000000000..27292c224
--- /dev/null
+++ b/tbx/static_src/sass/components/_related-courses.scss
@@ -0,0 +1,3 @@
+.related-courses {
+    @include streamblock-padding();
+}
diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss
index 67a140627..b64e7a4b6 100644
--- a/tbx/static_src/sass/main.scss
+++ b/tbx/static_src/sass/main.scss
@@ -71,6 +71,7 @@
 @import 'components/raw-html-block';
 @import 'components/reason';
 @import 'components/related-content';
+@import 'components/related-courses';
 @import 'components/related-item';
 @import 'components/report-hero';
 @import 'components/report-in-page-nav';