From 30aa2e976d8dd4f97b24738a87730d4562dbe991 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Mon, 24 Apr 2023 22:19:46 +0200
Subject: [PATCH] HTML: Fix thumbnails of related videos (watch page)

---
 src/invidious/views/watch.ecr | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 4f4354a9..9275631c 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -304,15 +304,26 @@ we're going to need to do it here in order to allow for translations.
 
                     <% video.related_videos.each do |rv| %>
                         <% if rv["id"]? %>
-                            <a href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>">
-                                <% if !env.get("preferences").as(Preferences).thin_mode %>
-                                    <div class="thumbnail">
+                            <div class="pure-u-1">
+
+                            <div class="thumbnail">
+                                <%- if !env.get("preferences").as(Preferences).thin_mode -%>
+                                    <a tabindex="-1" href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>">
                                         <img loading="lazy" class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg" alt="" />
-                                        <p class="length"><%= recode_length_seconds(rv["length_seconds"]?.try &.to_i? || 0) %></p>
-                                    </div>
-                                <% end %>
-                                <p style="width:100%"><%= rv["title"] %></p>
-                            </a>
+                                    </a>
+                                <%- end -%>
+
+                                <div class="bottom-right-overlay">
+                                    <%- if (length_seconds = rv["length_seconds"]?.try &.to_i?) && length_seconds != 0 -%>
+                                        <p class="length"><%= recode_length_seconds(length_seconds) %></p>
+                                    <%- end -%>
+                                </div>
+                            </div>
+
+                            <div class="video-card-row">
+                                <a href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>"><p dir="auto"><%= HTML.escape(rv["title"]) %></p></a>
+                            </div>
+
                             <h5 class="pure-g">
                                 <div class="pure-u-14-24">
                                     <% if rv["ucid"]? %>
@@ -330,6 +341,8 @@ we're going to need to do it here in order to allow for translations.
                                     %></b>
                                 </div>
                             </h5>
+
+                            </div>
                         <% end %>
                     <% end %>
                 </div>