Move sorting options to separate bar

assets/css/channel.css

@@ -179,3 +179,8 @@ only show up when the screen is wide enough */
 .light-theme .trailer-timestamp {
   color: rgb(127, 127, 127);
 }
+
+
+#content-navigation {
+  display: flex;
+}

src/invidious/views/components/channel-information.ecr

@@ -52,8 +52,8 @@
     <%= rendered "components/subscribe_widget" %>
 </div>
 
-<div class="pure-g h-box" id="content-navigation">
+<div class="h-box" id="content-navigation">
-    <div class="pure-u-1-3">
+    <div class="">
         <!-- TODO Add these!
         <a href="https://www.youtube.com/channel/<%= channel.ucid %>"><%= translate(locale, "View channel on YouTube") %></a> -->
         <!-- <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a> -->
@@ -164,15 +164,16 @@
           </ui>
         </div>
     </div>
-    <div class="pure-u-1-3"></div>
+</div>
 
+<div class="h-box">
+    <hr>
     <% if content_type == 1 || content_type == 2 %>
         <% route = content_type == 1 ? "/playlists" : "" %>
         <% url = "/channel/#{channel.ucid + route}" %>
 
-        <div class="pure-u-1-3"> <!-- Sort by -->
+        <div class="pure-menu pure-menu-horizontal" style="display: flex;">
-            <div class="pure-menu pure-menu-horizontal" style="">
+            <ul class="pure-menu-list" style="margin-left: auto;">
-                <ul class="pure-menu-list" style="float: right">
                 <% sort_options.each do |sort| %>
                     <% if sort_by == sort %>
                         <li class="pure-menu-item pure-menu-selected">
@@ -190,10 +191,6 @@
                 <% end %>
             </ul>
         </div>
-        </div>
     <% end %>
-</div>
-
-<div class="h-box">
     <hr>
 </div>