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.

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>