From 5937e0289ea3db346937ce4ccd6234ca03b9db36 Mon Sep 17 00:00:00 2001
From: Matthew McGarvey <matthew@sociallyu.com>
Date: Wed, 7 Oct 2020 23:01:18 -0500
Subject: [PATCH] Fix feed menu overlap at ipad screen widths

---
 assets/css/default.css                       | 16 +++++++++++
 src/invidious/views/components/feed_menu.ecr | 28 +++++++-------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index ea139b40a..b7a77be62 100644
--- a/assets/css/default.css
+++ b/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;
diff --git a/src/invidious/views/components/feed_menu.ecr b/src/invidious/views/components/feed_menu.ecr
index f72db2da8..3dbeaf371 100644
--- a/src/invidious/views/components/feed_menu.ecr
+++ b/src/invidious/views/components/feed_menu.ecr
@@ -1,19 +1,11 @@
-<div class="h-box pure-g">
-    <div class="pure-u-1 pure-u-md-1-4"></div>
-    <div class="pure-u-1 pure-u-md-1-2">
-        <div class="pure-g">
-            <% feed_menu = env.get("preferences").as(Preferences).feed_menu.dup %>
-            <% if !env.get?("user") %>
-                <% feed_menu.reject! {|item| {"Subscriptions", "Playlists"}.includes? item} %>
-            <% end %>
-            <% feed_menu.each do |feed| %>
-                <div class="pure-u-1-2 pure-u-md-1-<%= feed_menu.size %>">
-                    <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 class="feed-menu">
+    <% feed_menu = env.get("preferences").as(Preferences).feed_menu.dup %>
+    <% if !env.get?("user") %>
+        <% feed_menu.reject! {|item| {"Subscriptions", "Playlists"}.includes? item} %>
+    <% end %>
+    <% feed_menu.each do |feed| %>
+        <a href="/feed/<%= feed.downcase %>" class="feed-menu-item pure-menu-heading">
+            <%= translate(locale, feed) %>
+        </a>
+    <% end %>
 </div>