From 6627482f045830476859590e7bdcdc8a6f04ff18 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 9 Jul 2025 10:11:12 -0500
Subject: [PATCH] Add circle-on-mobile button class

---
 app/assets/stylesheets/buttons.css | 12 ++++++++++++
 app/views/cards/index.html.erb     |  4 ++--
 app/views/events/index.html.erb    |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 6e92fb98c..49b9aafb3 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/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);
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index ba6a28eba..3ac8073e3 100644
--- a/app/views/cards/index.html.erb
+++ b/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>
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 1e415dcc5..fd0fff703 100644
--- a/app/views/events/index.html.erb
+++ b/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 %>