Fix feed menu overlap at ipad screen widths

assets/css/default.css

@@ -60,6 +60,22 @@ body {
   color: rgb(255, 0, 0);
 }
 
+.feed-menu {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.feed-menu-item {
+  text-align: center;
+}
+
+@media screen and (max-width: 640px) {
+  .feed-menu-item {
+    flex: 0 0 40%;
+  }
+}
+
 .h-box {
   padding-left: 1em;
   padding-right: 1em;

src/invidious/views/components/feed_menu.ecr

@@ -1,19 +1,11 @@
-<div class="h-box pure-g">
+<div class="feed-menu">
-    <div class="pure-u-1 pure-u-md-1-4"></div>
+    <% feed_menu = env.get("preferences").as(Preferences).feed_menu.dup %>
-    <div class="pure-u-1 pure-u-md-1-2">
+    <% if !env.get?("user") %>
-        <div class="pure-g">
+        <% feed_menu.reject! {|item| {"Subscriptions", "Playlists"}.includes? item} %>
-            <% feed_menu = env.get("preferences").as(Preferences).feed_menu.dup %>
+    <% end %>
-            <% if !env.get?("user") %>
+    <% feed_menu.each do |feed| %>
-                <% feed_menu.reject! {|item| {"Subscriptions", "Playlists"}.includes? item} %>
+        <a href="/feed/<%= feed.downcase %>" class="feed-menu-item pure-menu-heading">
-            <% end %>
+            <%= translate(locale, feed) %>
-            <% feed_menu.each do |feed| %>
+        </a>
-                <div class="pure-u-1-2 pure-u-md-1-<%= feed_menu.size %>">
+    <% end %>
-                    <a href="/feed/<%= feed.downcase %>" class="pure-menu-heading" style="text-align:center">
-                        <%= translate(locale, feed) %>
-                    </a>
-                </div>
-            <% end %>
-        </div>
-    </div>
-    <div class="pure-u-1 pure-u-md-1-4"></div>
 </div>