From 1c5abbae2f1d0934ca1f899b3cdc20714e6b9d6d Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 4 Nov 2025 16:27:44 -0600
Subject: [PATCH 1/2] Add space between label and hotkey another way

---
 app/views/my/menus/_button.html.erb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/my/menus/_button.html.erb b/app/views/my/menus/_button.html.erb
index 52305cf60..dbeb2e9bf 100644
--- a/app/views/my/menus/_button.html.erb
+++ b/app/views/my/menus/_button.html.erb
@@ -1,8 +1,8 @@
-<%= tag.button class:"boxcar-menu-trigger input input--select center flex-inline gap-half align-center txt-normal",
+<%= tag.button class:"boxcar-menu-trigger input input--select center flex-inline align-center txt-normal",
       data: {
         action: "click->dialog#open:stop keydown.j@document->hotkey#click keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
         controller: "hotkey" } do %>
   <span><%= image_tag "logo.png" %></span>
   <strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
-  <kbd class="kbd txt-xx-small">J</kbd>
+  <kbd class="kbd txt-xx-small margin-inline-start">J</kbd>
 <% end %>

From 08df019ce66548a5ae0c5d883eb1f7bd78837d82 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 4 Nov 2025 16:34:28 -0600
Subject: [PATCH 2/2] Hide keyboard shortcuts on touch devices

---
 app/assets/stylesheets/utilities.css             | 14 ++++++++++++++
 app/views/bar/_bar.html.erb                      |  2 +-
 app/views/columns/show/_add_card_button.html.erb |  3 ++-
 app/views/events/index/_add_card_button.html.erb |  3 ++-
 app/views/my/menus/_button.html.erb              |  2 +-
 app/views/my/pins/_tray.html.erb                 |  2 +-
 app/views/notifications/_tray.html.erb           |  2 +-
 7 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 9b7b00bb1..99bac2252 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -233,4 +233,18 @@
   .hide-focus-ring {
     --focus-ring-size: 0;
   }
+
+  .hide-on-touch {
+    @media (any-hover: none) {
+      display: none;
+    }
+  }
+
+  .show-on-touch {
+    display: none;
+
+    @media (any-hover: none) {
+      display: unset;
+    }
+  }
 }
diff --git a/app/views/bar/_bar.html.erb b/app/views/bar/_bar.html.erb
index 095e7c0b2..6d2014e12 100644
--- a/app/views/bar/_bar.html.erb
+++ b/app/views/bar/_bar.html.erb
@@ -3,7 +3,7 @@
   <div class="flex justify-center bar__placeholder" data-bar-target="buttonsContainer">
     <%= tag.button class: "btn btn--plain", data: {
           controller: "hotkey", action: "bar#search keydown.k@document->hotkey#click" } do %>
-      <span class="display-contents">Search <% if platform.desktop? -%><kbd>K</kbd><% end %></span>
+      <span class="display-contents">Search <kbd class="hide-on-touch">K</kbd></span>
     <% end %>
   </div>
 
diff --git a/app/views/columns/show/_add_card_button.html.erb b/app/views/columns/show/_add_card_button.html.erb
index be4f7b420..a161465ef 100644
--- a/app/views/columns/show/_add_card_button.html.erb
+++ b/app/views/columns/show/_add_card_button.html.erb
@@ -1,7 +1,8 @@
 <div class="collection-tools card">
   <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link", form: { data: { turbo_frame: "_top" } }, data: { controller: "hotkey", action: "keydown.c@document->hotkey#click" } do %>
+    <%= icon_tag "add", class: "show-on-touch" %>
     <span>Add a card</span>
-    <kbd>C</kbd>
+    <kbd class="hide-on-touch">C</kbd>
   <% end %>
 
   <hr class="separator--horizontal full-width" aria-hidden="true">
diff --git a/app/views/events/index/_add_card_button.html.erb b/app/views/events/index/_add_card_button.html.erb
index fd0033541..664152e3d 100644
--- a/app/views/events/index/_add_card_button.html.erb
+++ b/app/views/events/index/_add_card_button.html.erb
@@ -1,8 +1,9 @@
 <div class="header__actions header__actions--start">
   <% if collection = user_filtering.single_collection_or_first %>
     <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.c@document->hotkey#click" } do %>
+      <%= icon_tag "add", class: "show-on-touch" %>
       <span>Add a card</span>
-      <kbd>C</kbd>
+      <kbd class="hide-on-touch">C</kbd>
     <% end %>
   <% end %>
 </div>
diff --git a/app/views/my/menus/_button.html.erb b/app/views/my/menus/_button.html.erb
index dbeb2e9bf..85b2c9a93 100644
--- a/app/views/my/menus/_button.html.erb
+++ b/app/views/my/menus/_button.html.erb
@@ -4,5 +4,5 @@
         controller: "hotkey" } do %>
   <span><%= image_tag "logo.png" %></span>
   <strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
-  <kbd class="kbd txt-xx-small margin-inline-start">J</kbd>
+  <kbd class="kbd txt-xx-small margin-inline-start hide-on-touch">J</kbd>
 <% end %>
diff --git a/app/views/my/pins/_tray.html.erb b/app/views/my/pins/_tray.html.erb
index aa3a5d4e2..571018728 100644
--- a/app/views/my/pins/_tray.html.erb
+++ b/app/views/my/pins/_tray.html.erb
@@ -14,7 +14,7 @@
   <button class="tray__toggle" data-action="dialog#toggle keydown.p@document->hotkey#click" data-controller="hotkey" aria-label="Toggle pins stack" aria-haspopup="true">
     <div class="tray__toggle-btn txt-uppercase btn btn--reversed txt-x-small center full-width">
       <%= icon_tag "pinned" %>
-      <span class="tray__toggle-text">Pinned <% if platform.desktop? -%><kbd>P</kbd><% end %></span>
+      <span class="tray__toggle-text">Pinned <kbd class="hide-on-touch">P</kbd></span>
     </div>
   </button>
 </section>
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index b81e72b44..3d01d594c 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -42,7 +42,7 @@
   <button class="tray__toggle" data-action="dialog#toggle keydown.n@document->hotkey#click" data-controller="hotkey" aria-label="Toggle notifications stack" aria-haspopup="true">
     <div class="tray__toggle-btn txt-uppercase btn btn--reversed txt-x-small center full-width">
       <%= icon_tag "bell" %>
-      <span class="tray__toggle-text">Notifications <% if platform.desktop? -%><kbd>N</kbd><% end %></span>
+      <span class="tray__toggle-text">Notifications <kbd class="hide-on-touch">N</kbd></span>
     </div>
   </button>
 </section>