Use pure-menu-horizontal for trending tabs

src/invidious/views/trending.ecr

@@ -11,28 +11,31 @@
 
 <%= rendered "components/feed_menu" %>
 
-<div class="pure-g h-box">
+<div class="" style="text-align: center">
-    <div style="align-self:flex-end" class="pure-u-2-3">
+    <!-- <div style="align-self:flex-end" class="pure-u-2-3">
         <% if plid %>
             <a href="/playlist?list=<%= plid %>">
                 <%= translate(locale, "View as playlist") %>
             </a>
         <% end %>
-    </div>
+    </div> -->
-    <div class="pure-u-1-3">
+    <div class="pure-menu pure-menu-horizontal">
-        <div class="pure-g" style="text-align:right">
+        <ui class="pure-menu-list">
             <% {"Default", "Music", "Gaming", "Movies"}.each do |option| %>
-                <div class="pure-u-1 pure-md-1-3">
                 <% if trending_type == option %>
-                        <b><%= translate(locale, option) %></b>
+                    <li class="pure-menu-item pure-menu-selected">
+                        <b><a href="/feed/trending?type=<%= option %>&region=<%= region %>" class="pure-menu-link">
+                          <%= translate(locale, option) %>
+                        </a></b>
                 <% else %>
-                        <a href="/feed/trending?type=<%= option %>&region=<%= region %>">
+                    <li class="pure-menu-item">
+                        <a href="/feed/trending?type=<%= option %>&region=<%= region %>" class="pure-menu-link">
                             <%= translate(locale, option) %>
                         </a>
+                    </li>
                 <% end %>
-                </div>
             <% end %>
-        </div>
+        </ui>
     </div>
 </div>