From a9bbd9d5397aa1a93b24b391c464f6e9fd56418d Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 21 Nov 2025 16:07:36 -0600
Subject: [PATCH] Special handling on mobile

---
 app/assets/stylesheets/buttons.css          | 6 ++++++
 app/views/cards/container/_closure.html.erb | 6 ++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 69c2a682d..a4e7199e0 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -113,7 +113,12 @@
       span:last-of-type {
         display: none;
       }
+    }
+  }
 
+  @media (min-width: 640px) {
+    .btn--circle-mobile .icon--mobile-only {
+      display: none !important;
     }
   }
 
@@ -221,6 +226,7 @@
     }
   }
 
+
   /* Button groups
   /* ------------------------------------------------------------------------ */
 
diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb
index 0093fc664..f14e602b0 100644
--- a/app/views/cards/container/_closure.html.erb
+++ b/app/views/cards/container/_closure.html.erb
@@ -8,14 +8,16 @@
     </div>
   <% else %>
     <div class="flex gap-half">
-      <%= link_to edit_card_path(card), class: "btn borderless", data: { controller: "hotkey", action: "keydown.e@document->hotkey#click" } do %>
+      <%= link_to edit_card_path(card), class: "btn btn--circle-mobile borderless", data: { controller: "hotkey", action: "keydown.e@document->hotkey#click" } do %>
+        <%= icon_tag "pencil", class: "icon--mobile-only" %>
         <span>Edit</span>
         <kbd class="txt-x-small hide-on-touch">e</kbd>
       <% end %>
 
-      <%= button_to card_closure_path(card), class: "btn borderless",
+      <%= button_to card_closure_path(card), class: "btn btn--circle-mobile borderless",
           data: { controller: "hotkey", form_target: "submit", action: "keydown.d@document->hotkey#click" },
           form: { data: { controller: "form" } } do %>
+        <%= icon_tag "check", class: "icon--mobile-only" %>
         <span class="overflow-ellipsis">Mark as Done</span>
         <kbd class="txt-x-small hide-on-touch">d</kbd>
       <% end %>