From 7ec93825b6e92667b345463d8d42e66764a83a57 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cadence@disroot.org>
Date: Thu, 24 Jun 2021 21:05:06 +1200
Subject: [PATCH] Change description-box from flex to block

I also make minor changes to the surroundings so that the same layout
and functionality as before is preserved.
---
 assets/css/default.css        |  7 +------
 src/invidious/views/watch.ecr | 10 +++++-----
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index de295501..808df295 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -492,11 +492,6 @@ hr {
 }
 
 /* Description Expansion Styling*/
-#description-box {
-  display: flex;
-  flex-direction: column;
-}
-
 #descexpansionbutton {
   display: none
 }
@@ -511,7 +506,7 @@ hr {
   height: 100%;
 }
 
-#descexpansionbutton + label {
+#descexpansionbutton ~ label {
   order: 1;
   margin-top: 20px;
 }
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 91e03725..8ea83384 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -30,11 +30,11 @@
 we're going to need to do it here in order to allow for translations.
  -->
 <style>
-#descexpansionbutton + label > a::after {
+#descexpansionbutton ~ label > a::after {
     content: "<%= translate(locale, "Show more") %>"
 }
 
-#descexpansionbutton:checked + label > a::after {
+#descexpansionbutton:checked ~ label > a::after {
     content: "<%= translate(locale, "Show less") %>"
 }
 </style>
@@ -249,12 +249,12 @@ we're going to need to do it here in order to allow for translations.
                     <%= video.description_html %>
                 <% else %>
                     <input id="descexpansionbutton" type="checkbox"/>
-                    <label for="descexpansionbutton" style="order: 1;">
-                        <a></a>
-                    </label>
                     <div id="descriptionWrapper">
                         <%= video.description_html %>
                     </div>
+                    <label for="descexpansionbutton">
+                        <a></a>
+                    </label>
                 <% end %>
             </div>