From fcf1f07b0975f85d104a06d97f6c51c32a123000 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 16:36:40 +1200
Subject: [PATCH] Fixed chapters not wrapping correctly

---
 materialious/src/routes/watch/[slug]/+page.svelte | 13 ++++++++-----
 materialious/static/style.css                     | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 7dd4f836..d2357d61 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -414,10 +414,7 @@
 							{#if data.content.timestamps.length > 0}
 								<h6 style="margin-bottom: .3em;">Chapters</h6>
 								{#each data.content.timestamps as timestamp}
-									<button
-										on:click={() => seekTo(timestamp.time)}
-										class="timestamps"
-										class:primary={timestamp.time <= currentTime}
+									<button on:click={() => seekTo(timestamp.time)} class="timestamps"
 										>{timestamp.timePretty}
 										{#if !timestamp.title.startsWith('-')}
 											-
@@ -503,10 +500,16 @@
 		margin-left: 0;
 		margin-bottom: 0.4em;
 		display: block;
-		background-color: var(--secondary-container);
+		padding: 0;
+		text-align: left;
+		background-color: transparent;
 		color: var(--on-secondary-container);
 	}
 
+	.timestamps:hover {
+		padding: 0 0.5em;
+	}
+
 	.video-actions {
 		display: flex;
 		align-items: center;
diff --git a/materialious/static/style.css b/materialious/static/style.css
index 51fd4b99..9cd400b1 100644
--- a/materialious/static/style.css
+++ b/materialious/static/style.css
@@ -2,6 +2,20 @@
     padding: .1em .4em;
 }
 
+.vds-chapter-radio-label {
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    white-space: normal !important;
+}
+
+.vds-chapter-radio-content {
+    max-width: 200px !important;
+}
+
+.vds-chapter-radio {
+    align-items: start !important;
+}
+
 @media screen and (max-width: 580px) {
     main {
         padding-left: .1em !important;