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 808df295..1df63412 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 2f734b2c..dd2807de 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 b0092e5f..bc6fb631 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 a19dd182..377da20f 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 975ccd6c..52b79a40 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 8ea83384..7ee3fb1a 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">