From 9e4fd193c6f8a8a00243d04abba0ea4393ad10b7 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Thu, 24 Jun 2021 15:00:55 +0200
Subject: [PATCH] Limit descriptions width to ease mixed LTR/RTL text reading

This will prevent, on large pages, the LTR and RTL text to be
far away, on each side of the page. This could happen on channel
and playlists descriptions, when the page is displayed on a large
screen.
---
 assets/css/default.css            | 4 ++++
 src/invidious/views/channel.ecr   | 4 +++-
 src/invidious/views/community.ecr | 4 +++-
 src/invidious/views/playlist.ecr  | 4 +++-
 src/invidious/views/playlists.ecr | 4 +++-
 src/invidious/views/watch.ecr     | 4 +++-
 6 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 808df2959..1df634122 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -523,3 +523,7 @@ p,
 	unicode-bidi: plaintext;
 	text-align: start;
 }
+
+#descriptionWrapper {
+       max-width: 600px;
+}
diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index 2f734b2c9..dd2807de0 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -28,7 +28,9 @@
 </div>
 
 <div class="h-box">
-    <p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
+    <div id="descriptionWrapper">
+        <p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
+    </div>
 </div>
 
 <div class="h-box">
diff --git a/src/invidious/views/community.ecr b/src/invidious/views/community.ecr
index b0092e5f7..bc6fb6319 100644
--- a/src/invidious/views/community.ecr
+++ b/src/invidious/views/community.ecr
@@ -27,7 +27,9 @@
 </div>
 
 <div class="h-box">
-    <p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content %></span></p>
+    <div id="descriptionWrapper">
+        <p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content %></span></p>
+    </div>
 </div>
 
 <div class="h-box">
diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr
index a19dd182f..377da20f5 100644
--- a/src/invidious/views/playlist.ecr
+++ b/src/invidious/views/playlist.ecr
@@ -64,7 +64,9 @@
 </div>
 
 <div class="h-box">
-    <p><%= playlist.description_html %></p>
+    <div id="descriptionWrapper">
+        <p><%= playlist.description_html %></p>
+    </div>
 </div>
 
 <% if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email %>
diff --git a/src/invidious/views/playlists.ecr b/src/invidious/views/playlists.ecr
index 975ccd6c3..52b79a400 100644
--- a/src/invidious/views/playlists.ecr
+++ b/src/invidious/views/playlists.ecr
@@ -27,7 +27,9 @@
 </div>
 
 <div class="h-box">
-    <p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content if !channel.description_html.empty? %></span></p>
+    <div id="descriptionWrapper">
+        <p><span style="white-space:pre-wrap"><%= XML.parse_html(channel.description_html).xpath_node(%q(.//pre)).try &.content if !channel.description_html.empty? %></span></p>
+    </div>
 </div>
 
 <div class="h-box">
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 8ea83384e..7ee3fb1a9 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -246,7 +246,9 @@ we're going to need to do it here in order to allow for translations.
 
             <div id="description-box"> <!-- Description -->
                 <% if video.description.size < 200 || params.extend_desc %>
-                    <%= video.description_html %>
+                    <div id="descriptionWrapper">
+                        <%= video.description_html %>
+                    </div>
                 <% else %>
                     <input id="descexpansionbutton" type="checkbox"/>
                     <div id="descriptionWrapper">