From 2881d59f167e2ead8ec4c1b68cf84f8b0d92ec6f Mon Sep 17 00:00:00 2001
From: Fijxu <fijxu@nadeko.net>
Date: Sun, 30 Nov 2025 18:35:14 -0300
Subject: [PATCH] Fix channel name overflow

---
 assets/css/default.css                          | 3 ++-
 src/invidious/views/components/channel_info.ecr | 2 +-
 src/invidious/views/watch.ecr                   | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 644d91c2..78ef7a60 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -404,8 +404,9 @@ input[type="search"]::-webkit-search-cancel-button {
 
 .video-card-row { margin: 15px 0; }
 
-p.channel-name { margin: 0; }
+p.channel-name { margin: 0; overflow-wrap: anywhere;}
 p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
+.channel-profile > .channel-name { overflow-wrap: anywhere;}
 
 
 /*
diff --git a/src/invidious/views/components/channel_info.ecr b/src/invidious/views/components/channel_info.ecr
index f4164f31..2c177b59 100644
--- a/src/invidious/views/components/channel_info.ecr
+++ b/src/invidious/views/components/channel_info.ecr
@@ -12,7 +12,7 @@
     <div class="pure-u-1-2 flex-left flexible">
         <div class="channel-profile">
             <img src="/ggpht<%= channel_profile_pic %>" alt="" />
-            <span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
+            <span class="channel-name"><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
         </div>
     </div>
 
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 89632dc5..923c2a83 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -230,7 +230,7 @@ we're going to need to do it here in order to allow for translations.
                         <% if !video.author_thumbnail.empty? %>
                             <img src="/ggpht<%= URI.parse(video.author_thumbnail).request_target %>" alt="" />
                         <% end %>
-                        <span id="channel-name"><%= author %><% if !video.author_verified.nil? && video.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></span>
+                        <span id="channel-name" class="channel-name"><%= author %><% if !video.author_verified.nil? && video.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></span>
                     </div>
                 </a>
             </div>