Add circle-on-mobile button class

app/assets/stylesheets/buttons.css

@@ -80,6 +80,18 @@
     }
   }
 
+  /* Make a normal button circular on mobile */
+  @media (max-width: 640px) {
+    .btn--circle-mobile {
+      aspect-ratio: 1;
+      padding: 0.5em;
+
+      span:last-of-type {
+        display: none;
+      }
+    }
+  }
+
   .btn--negative {
     --btn-background: var(--color-negative);
     --btn-border-color: var(--color-negative);

app/views/cards/index.html.erb

@@ -9,9 +9,9 @@
 <header class="header" style="--header-actions-width: 7rem;">
   <div class="header__actions header__actions--start">
     <% if collection = @filter.single_collection || Current.user.collections.first %>
-      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link" do %>
+      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link btn--circle-mobile" do %>
         <%= icon_tag "add" %>
-        Add a card
+        <span>Add a card</span>
       <% end %>
     <% end %>
   </div>

app/views/events/index.html.erb

@@ -11,7 +11,7 @@
 <header class="header margin-block-end" style="--header-button-count: 3;">
   <div class="header__actions header__actions--start">
     <% if collection = @filter.single_collection || Current.user.collections.first %>
-      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link" do %>
+      <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link btn--circle-mobile" do %>
         <%= icon_tag "add" %>
         <span>Add a card</span>
       <% end %>