Fix grid size for smaller devices

assets/css/lighttheme.css

@@ -10,7 +10,7 @@ a {
 
 /* All links that do not fit with the default color goes here */
 a:not([data-id]) > .icon,
-.pure-u-md-1-5 > .h-box > a[href^="/watch?"],
+.pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
 .playlist-restricted > ol > li > a {
   color: #303030;
 }

src/invidious/views/channel.ecr

@@ -67,15 +67,15 @@
 </div>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/channel/<%= ucid %>?page=<%= page - 1 %><% if sort_by != "newest" %>&sort_by=<%= sort_by %><% end %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right" class="pure-u-1 pure-u-lg-1-5">
     <% if count == 60 %>
         <a href="/channel/<%= ucid %>?page=<%= page + 1 %><% if sort_by != "newest" %>&sort_by=<%= sort_by %><% end %>">
             <%= translate(locale, "Next page") %>

src/invidious/views/history.ecr

@@ -72,15 +72,15 @@ function mark_unwatched(target) {
 </script>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/feed/history?page=<%= page - 1 %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
     <% if watched.size >= limit %>
         <a href="/feed/history?page=<%= page + 1 %>">
             <%= translate(locale, "Next page") %>

src/invidious/views/login.ecr

@@ -3,8 +3,8 @@
 <% end %>
 
 <div class="pure-g">
-    <div class="pure-u-1 pure-u-md-1-5"></div>
-    <div class="pure-u-1 pure-u-md-3-5">
+    <div class="pure-u-1 pure-u-lg-1-5"></div>
+    <div class="pure-u-1 pure-u-lg-3-5">
         <div class="h-box">
             <div class="pure-g">
                 <div class="pure-u-1-2">
@@ -112,5 +112,5 @@
             <% end %>
         </div>
     </div>
-    <div class="pure-u-1 pure-u-md-1-5"></div>
+    <div class="pure-u-1 pure-u-lg-1-5"></div>
 </div>

src/invidious/views/playlist.ecr

@@ -34,15 +34,15 @@
 </div>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/playlist?list=<%= playlist.id %>&page=<%= page - 1 %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
     <% if videos.size == 100 %>
         <a href="/playlist?list=<%= playlist.id %>&page=<%= page + 1 %>">
             <%= translate(locale, "Next page") %>

src/invidious/views/playlists.ecr

@@ -65,7 +65,7 @@
 
 <div class="pure-g h-box">
     <div class="pure-u-1 pure-u-md-4-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
     <% if items.size >= 28 %>
         <a href="/channel/<%= ucid %>/playlists?continuation=<%= continuation %><% if sort_by != "last" %>&sort_by=<%= sort_by %><% end %>">
             <%= translate(locale, "Next page") %>

src/invidious/views/search.ecr

@@ -11,15 +11,15 @@
 </div>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&page=<%= page - 1 %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
     <% if count >= 20 %>
         <a href="/search?q=<%= HTML.escape(query.not_nil!) %>&page=<%= page + 1 %>">
             <%= translate(locale, "Next page") %>

src/invidious/views/subscriptions.ecr

@@ -74,15 +74,15 @@ function mark_watched(target) {
 </script>
 
 <div class="pure-g h-box">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
     <% if page >= 2 %>
         <a href="/feed/subscriptions?max_results=<%= max_results %>&page=<%= page - 1 %>">
             <%= translate(locale, "Previous page") %>
         </a>
     <% end %>
     </div>
-    <div class="pure-u-1 pure-u-md-3-5"></div>
-    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-3-5"></div>
+    <div style="text-align:right;" class="pure-u-1 pure-u-lg-1-5">
         <% if (videos.size + notifications.size) == max_results %>
             <a href="/feed/subscriptions?max_results=<%= max_results %>&page=<%= page + 1 %>">
                 <%= translate(locale, "Next page") %>

src/invidious/views/watch.ecr

@@ -53,7 +53,7 @@
 </div>
 
 <div class="pure-g">
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
         <div class="h-box">
             <p><a href="https://www.youtube.com/watch?v=<%= video.id %>"><%= translate(locale, "Watch video on Youtube") %></a></p>
 
@@ -122,7 +122,7 @@
         </div>
     </div>
 
-    <div class="pure-u-1 <% if params[:related_videos] || plid %>pure-u-md-3-5<% else %>pure-u-md-4-5<% end %>">
+    <div class="pure-u-1 <% if params[:related_videos] || plid %>pure-u-lg-3-5<% else %>pure-u-md-4-5<% end %>">
         <div class="h-box">
             <p>
                 <a href="/channel/<%= video.ucid %>">
@@ -154,7 +154,7 @@
         </div>
     </div>
     <% if params[:related_videos] || plid %>
-    <div class="pure-u-1 pure-u-md-1-5">
+    <div class="pure-u-1 pure-u-lg-1-5">
         <% if plid %>
         <div id="playlist" class="h-box">
         </div>