From 16bf08bb5cd6118704346f642a491d37c998ef54 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 22 Feb 2023 16:49:12 +0100
Subject: [PATCH] sticky schedule group headings

---
 resources/js/components/episodes/List.js |  4 +++-
 resources/sass/episodes.scss             | 10 ++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/episodes/List.js b/resources/js/components/episodes/List.js
index a28fa48..6f46e75 100644
--- a/resources/js/components/episodes/List.js
+++ b/resources/js/components/episodes/List.js
@@ -18,7 +18,9 @@ const List = ({ episodes, onAddRestream, onEditRestream }) => {
 
 	return <div className="episodes-list">
 		{Object.entries(grouped).map(([day, group]) => <div key={day}>
-			<h2 className="text-center my-5">{moment(day).format('dddd, L')}</h2>
+			<h2 className="text-center episodes-group-heading">
+				{moment(day).format('dddd, L')}
+			</h2>
 			{group.map(episode =>
 				<Item
 					episode={episode}
diff --git a/resources/sass/episodes.scss b/resources/sass/episodes.scss
index d4d686b..3372257 100644
--- a/resources/sass/episodes.scss
+++ b/resources/sass/episodes.scss
@@ -1,3 +1,13 @@
+.episodes-group-heading {
+	position: sticky;
+	top: 0;
+	margin: 2rem 0 0 0;
+	padding: 1rem 0 3rem 0;
+	background: $body-bg;
+	background: linear-gradient(180deg, $body-bg, $body-bg 65%, transparent);
+	z-index: 1;
+}
+
 .episodes-item {
 	&.is-active {
 		border-color: $success !important;
-- 
2.39.2