HTML/CSS: Fix buttons' responsiveness

3 files changed, 78 insertions, 38 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index f671c3bf..21121f4d 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -1,3 +1,7 @@
+/*
+ * Common attributes
+ */
+
 html,
 body {
   font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen,
@@ -11,6 +15,16 @@ body {
   min-height: 100vh;
 }
 
+.h-box {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.v-box {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
 .deleted {
   background-color: rgb(255, 0, 0, 0.5);
 }
@@ -20,6 +34,34 @@ body {
   margin-bottom: 20px;
 }
 
+.title {
+  margin: 0.5em 0 1em 0;
+}
+
+/* A flex container */
+.flexible {
+  display: flex;
+  align-items: center;
+}
+
+.flex-left {
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+}
+.flex-right {
+  display: flex;
+  flex: 2 0 auto;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
+
+
+/*
+ * Channel page
+ */
+
 .channel-profile > * {
   font-size: 1.17em;
   font-weight: bold;
@@ -90,16 +132,6 @@ body a.channel-owner {
   }
 }
 
-.h-box {
-  padding-left: 1em;
-  padding-right: 1em;
-}
-
-.v-box {
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
 div {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -144,9 +176,15 @@ body a.pure-button-primary,
   margin: 0;
 }
 
+/* Has to be combined with flex-left/right */
+.button-container {
+  flex-flow: wrap;
+  gap: 0.5em 0.75em;
+}
+
 
 /*
- * Thumbnails
+ * Video thumbnails
  */
 
 div.thumbnail {
@@ -280,6 +318,11 @@ input[type="search"]::-webkit-search-cancel-button {
   margin-right: 1em;
 }
 
+
+/*
+ * Responsive rules
+ */
+
 @media only screen and (max-aspect-ratio: 16/9) {
   .player-dimensions.vjs-fluid {
     padding-top: 46.86% !important;
@@ -298,20 +341,28 @@ input[type="search"]::-webkit-search-cancel-button {
   .navbar > div {
     display: flex;
     justify-content: center;
-  }
-
-  .navbar > div:not(:last-child) {
-    margin-bottom: 1em;
+    margin-bottom: 25px;
   }
 
   .navbar > .searchbar > form {
-    width: 60%;
+    width: 75%;
   }
 
   h1 {
     font-size: 1.25em;
     margin: 0.42em 0;
   }
+
+  /* Space out the subscribe & RSS buttons and align them to the left */
+  .title.flexible { display: block; }
+  .title.flexible > .flex-right { margin: 0.75em 0; justify-content: flex-start; }
+
+  /* Space out buttons to make them easier to tap */
+  .user-field { font-size: 125%; }
+  .user-field > :not(:last-child) { margin-right: 1.75em; }
+
+  .icon-buttons { font-size: 125%; }
+  .icon-buttons > :not(:last-child) { margin-right: 0.75em; }
 }
 
 @media screen and (max-width: 320px) {
@@ -328,10 +379,6 @@ input[type="search"]::-webkit-search-cancel-button {
 
 .video-card-row { margin: 15px 0; }
 
-.flexible { display: flex; }
-.flex-left  { flex: 1 1 100%; flex-wrap: wrap;   }
-.flex-right { flex: 1 0 auto; flex-wrap: nowrap; }
-
 p.channel-name { margin: 0; }
 p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
 
@@ -659,12 +706,7 @@ label[for="music-desc-expansion"]:hover {
 }
 
 /* Bidi (bidirectional text) support */
-h1,
-h2,
-h3,
-h4,
-h5,
-p,
+h1, h2, h3, h4, h5, p,
 #descriptionWrapper,
 #description-box,
 #music-description-box {
diff --git a/src/invidious/views/components/video-context-buttons.ecr b/src/invidious/views/components/video-context-buttons.ecr
index ddb6c983..385ed6b3 100644
--- a/src/invidious/views/components/video-context-buttons.ecr
+++ b/src/invidious/views/components/video-context-buttons.ecr
@@ -1,4 +1,4 @@
-<div class="flex-right">
+<div class="flex-right flexible">
     <div class="icon-buttons">
         <a title="<%=translate(locale, "videoinfo_watch_on_youTube")%>" href="https://www.youtube.com/watch<%=endpoint_params%>">
             <i class="icon ion-logo-youtube"></i>
@@ -6,7 +6,7 @@
         <a title="<%=translate(locale, "Audio mode")%>" href="/watch<%=endpoint_params%>&listen=1">
             <i class="icon ion-md-headset"></i>
         </a>
-        
+
         <% if env.get("preferences").as(Preferences).automatic_instance_redirect%>
             <a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=%2Fwatch<%=URI.encode_www_form(endpoint_params)%>">
                 <i class="icon ion-md-jet"></i>
diff --git a/src/invidious/views/playlist.ecr b/src/invidious/views/playlist.ecr
index 8d4d116d..ee9ba87b 100644
--- a/src/invidious/views/playlist.ecr
+++ b/src/invidious/views/playlist.ecr
@@ -6,30 +6,28 @@
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/playlist/<%= plid %>" />
 <% end %>
 
-<div class="pure-g h-box">
-    <div class="pure-u-1-2">
-        <h3><%= title %></h3>
-    </div>
+<div class="h-box flexible title">
+    <div class="flex-left"><h3><%= title %></h3></div>
 
-    <div class="pure-u-1-2 user-field">
+    <div class="flex-right button-container">
         <%- if playlist.is_a?(InvidiousPlaylist) && playlist.author == user.try &.email -%>
-            <div class="pure-u-1-3">
+            <div class="pure-u">
                 <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/add_playlist_items?list=<%= plid %>">
                     <i class="icon ion-md-add"></i>&nbsp;<%= translate(locale, "playlist_button_add_items") %>
                 </a>
             </div>
-            <div class="pure-u-1-3">
+            <div class="pure-u">
                 <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/edit_playlist?list=<%= plid %>">
                     <i class="icon ion-md-create"></i>&nbsp;<%= translate(locale, "generic_button_edit") %>
                 </a>
             </div>
-            <div class="pure-u-1-3">
+            <div class="pure-u">
                 <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/delete_playlist?list=<%= plid %>">
                     <i class="icon ion-md-trash"></i>&nbsp;<%= translate(locale, "generic_button_delete") %>
                 </a>
             </div>
         <%- else -%>
-            <div class="pure-u-1-3">
+            <div class="pure-u">
                 <%- if IV::Database::Playlists.exists?(playlist.id) -%>
                     <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/subscribe_playlist?list=<%= plid %>">
                         <i class="icon ion-md-add"></i>&nbsp;<%= translate(locale, "Subscribe") %>
@@ -42,7 +40,7 @@
             </div>
         <%- end -%>
 
-        <div class="pure-u-1-3">
+        <div class="pure-u">
             <a class="pure-button pure-button-secondary low-profile" dir="auto" href="/feed/playlist/<%= plid %>">
                 <i class="icon ion-logo-rss"></i>&nbsp;<%= translate(locale, "generic_button_rss") %>
             </a>