From 01fc9b629a0987f02546f1322916e3c3cf0ffcb9 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Mon, 22 Jul 2024 17:04:23 +1200
Subject: [PATCH] 2024 Theme: Improve single Lesson responsive header

Account for standalone lessons and smallest screen sizes

See https://github.com/WordPress/Learn/issues/2637
---
 .../wporg-learn-2024/src/style/_sensei.scss   | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
index 1b8c23b53..317d1ac2b 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
@@ -65,9 +65,23 @@ body.sensei {
 		}
 	}
 
+	// Hide the Lesson title breadcrumb as it's already displayed in the h1, and the leading slash.
 	@media screen and (max-width: 1024px) {
-		.wp-block-wporg-site-breadcrumbs span:not(:last-child):not(:first-child) {
-			display: none;
+		.wp-block-wporg-site-breadcrumbs span {
+			&:last-child,
+			&:nth-child(3)::after {
+				display: none;
+			}
+		}
+	}
+
+	// Leave only the 'Home' breadcrumb. The 'Exit Course' button enables navigating to the parent course.
+	@media screen and (max-width: 600px) {
+		.wp-block-wporg-site-breadcrumbs span {
+			&:not(:first-child),
+			&::after {
+				display: none;
+			}
 		}
 	}
 
@@ -260,6 +274,7 @@ body.sensei {
 			border-bottom: 1px solid var(--wp--custom--color--border);
 		}
 
+		.wp-block-sensei-lms-sidebar-toggle-button,
 		.wp-block-sensei-lms-exit-course,
 		.wp-block-sensei-lms-course-theme-notices {
 			display: none;
@@ -278,6 +293,13 @@ body.sensei {
 				padding-right: var(--wp--preset--spacing--edge-space);
 			}
 		}
+
+		// Also hide the leading slash for the Lesson title breadcrumb when it is hidden.
+		@media screen and (max-width: 1024px) {
+			.wp-block-wporg-site-breadcrumbs span:nth-child(2)::after {
+				display: none;
+			}
+		}
 	}
 
 	@media (min-width: 782px) {