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,36 +164,33 @@
           </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| %>
-                    <% sort_options.each do |sort| %>
+                    <% if sort_by == sort %>
-                        <% if sort_by == sort %>
+                        <li class="pure-menu-item pure-menu-selected">
-                            <li class="pure-menu-item pure-menu-selected">
+                            <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
-                                <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
+                                <b><%= translate(locale, sort) %></b>
-                                    <b><%= translate(locale, sort) %></b>
+                            </a>
-                                </a>
+                        </li>
-                            </li>
+                    <% else %>
-                        <% else %>
+                        <li class="pure-menu-item">
-                            <li class="pure-menu-item">
+                            <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
-                                <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
+                                <%= translate(locale, sort) %>
-                                    <%= translate(locale, sort) %>
+                            </a>
-                                </a>
+                        </li>
-                            </li>
-                        <% end %>
                     <% end %>
-                </ul>
+                <% end %>
-            </div>
+            </ul>
         </div>
     <% end %>
-</div>
-
-<div class="h-box">
     <hr>
 </div>