From 3fba6f5728a80025e1928e9542dcb52a090c5e44 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Mon, 21 Aug 2023 00:44:20 -0700
Subject: [PATCH] Fix description chapter component design

---
 assets/css/default.css                        | 23 +++++++++++++++++--
 .../description_chapters_widget.ecr           | 18 +++++++--------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 90a65241e..d9a58329e 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -160,7 +160,9 @@ body a.pure-button {
 button.pure-button-primary,
 body a.pure-button-primary,
 .channel-owner:hover,
-.channel-owner:focus {
+.channel-owner:focus,
+.chapter:hover,
+.chapter:focus {
   background-color: #a0a0a0;
   color: rgba(35, 35, 35, 1);
 }
@@ -797,9 +799,26 @@ h1, h2, h3, h4, h5, p,
 }
 
 #download_widget {
-    width: 100%;
+  width: 100%;
 }
+
+.description-chapters-section {
+  white-space: normal;
+}
+
 .description-chapters-content-container {
   display: flex;
   flex-direction: row;
+  gap: 5px;
+  overflow: scroll;
+
+  overflow-y: hidden;
+}
+
+.chapter {
+  padding: 3px;
+}
+
+.chapter .thumbnail {
+  width: 200px;
 }
diff --git a/src/invidious/views/components/description_chapters_widget.ecr b/src/invidious/views/components/description_chapters_widget.ecr
index e604cd583..8fca9d36c 100644
--- a/src/invidious/views/components/description_chapters_widget.ecr
+++ b/src/invidious/views/components/description_chapters_widget.ecr
@@ -1,11 +1,11 @@
 <% if !chapters.empty? %>
-    <hr class="description-content-separator"/>
     <div class="description-chapters-section">
-        <h5>Chapters</h5>
+        <hr class="description-content-separator"/>
+        <h4>Chapters</h4>
         <div class="description-chapters-content-container">
             <% chapters.each do | chapter |%>
-                <div class="chapter">
-                    <a href="/watch?v=<%= video.id %>&t=<%=chapter.start_ms.milliseconds.total_seconds.to_i %>">
+                <a href="/watch?v=<%= video.id %>&t=<%=chapter.start_ms.milliseconds.total_seconds.to_i %>">
+                    <div class="chapter">
                         <div class="thumbnail">
                             <%- if !env.get("preferences").as(Preferences).thin_mode -%>
                                 <img loading="lazy" class="thumbnail" src="<%-=URI.parse(chapter.thumbnails[-1]["url"].to_s).request_target %>" alt="" />
@@ -13,12 +13,12 @@
                                 <div class="thumbnail-placeholder"></div>
                             <%- end -%>
                         </div>
-                        <p><%-= recode_length_seconds(chapter.start_ms.milliseconds.total_seconds) %></p>
-                        <p><%-=chapter.title%></p>
-                    </a>
-                </div>
+                        <p><%-= recode_length_seconds(chapter.start_ms.milliseconds.total_seconds) -%></p>
+                        <p><%-=chapter.title-%></p>
+                    </div>
+                </a>
             <% end %>
         </div>
+        <hr class="description-content-separator"/>
     </div>
-    <hr class="description-content-separator"/>
 <% end %>
\ No newline at end of file