Make room names sticky, events are now at most 80% of viewport width

assets/_schedule.scss

@@ -4,12 +4,12 @@ $timeslot-height: 0.65em;
 
 .schedule {
 	display: flex;
-	overflow-x: auto;
+	padding-right: 0.5em;
 
 	.schedule-date {
 		height: 0;
 		position: relative;
-		top: calc(-3rem - 1px);
+		top: calc(-5rem - 1px);
 		visibility: hidden;
 		width: 0;
 	}
@@ -55,23 +55,34 @@ $timeslot-height: 0.65em;
 	.schedule-grid {
 		display: grid;
 		grid-auto-rows: $timeslot-height;
-		grid-template-rows: 2em;
+		grid-template-rows: 2rem;
 
 		&.schedule-room {
+			grid-template-columns: 80vw;
+
+			@media screen and (min-width: 501px) {
 				grid-template-columns: 400px;
 			}
+		}
 
 		& > * {
 			grid-column: 1 / 2;
 		}
+
+		& > .schedule-title {
+			background: $color-background;
+			font-size: 1.17rem;
+			margin-bottom: 0;
+			padding-bottom: 0.5em;
+			position: sticky;
+			text-align: center;
+			top: 3rem;
+			z-index: 42;
+		}
 	}
 
 	.schedule-room {
 		margin: 0 0.5em;
-
-		& > .schedule-title {
-			text-align: center;
-		}
 	}
 
 	.schedule-time {
@@ -81,19 +92,28 @@ $timeslot-height: 0.65em;
 
 	.schedule-timeline {
 		background: $color-background;
-		padding-right: 0.5em;
+		padding: 0 0.5em 0 1em;
 		position: sticky;
 		left: 0;
 	}
 }
 
+.schedule-container {
+	display: flex;
+	flex-direction: column;
+	margin-left: -1rem;
+	width: min-content;
+}
+
 .schedule-days {
 	background: $color-background;
 	display: flex;
 	font-size: 1rem;
+	left: 0;
 	line-height: 1;
+	max-width: 100vw;
 	overflow-x: auto;
-	padding: 1em 0;
+	padding: 1em;
 	position: sticky;
 	top: 0;
 	z-index: 42;

layouts/shortcodes/schedule.html

@@ -4,6 +4,7 @@
 	<br>Zeitangaben in <span class="schedule-timezone">{{ .timezone }}</span>
 </p>
 
+<div class="schedule-container">
 	<div class="schedule-days">
 {{ range .days }}
 		<a href="#{{ . }}">{{ . }}</a>&middot;
@@ -44,4 +45,5 @@
 		</div>
 {{ end }}
 	</div>
+</div>
 {{ end }}