From 3b480471a64abf2a1225274f933fc0e74c4ec57b Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 31 Oct 2025 11:31:21 -0500
Subject: [PATCH 1/2] Align bar shortcuts better

---
 app/views/bar/_bar.html.erb            | 2 +-
 app/views/my/pins/_tray.html.erb       | 8 ++++----
 app/views/notifications/_tray.html.erb | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/views/bar/_bar.html.erb b/app/views/bar/_bar.html.erb
index a0abb1d28..a1eb72343 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>Search <% if platform.desktop? -%><kbd>K</kbd><% end %></span>
+      <span class="flex align-center gap-half">Search <% if platform.desktop? -%><kbd>K</kbd><% end %></span>
     <% end %>
   </div>
 
diff --git a/app/views/my/pins/_tray.html.erb b/app/views/my/pins/_tray.html.erb
index 8114454bd..9fd3aacb3 100644
--- a/app/views/my/pins/_tray.html.erb
+++ b/app/views/my/pins/_tray.html.erb
@@ -1,10 +1,10 @@
 <%= turbo_stream_from Current.user, :pins_tray %>
 
 <section class="tray tray--pins" data-controller="dialog">
-  <%= tag.dialog id: "pin-tray", class: "tray__dialog", data: { 
+  <%= tag.dialog id: "pin-tray", class: "tray__dialog", data: {
       action: "keydown->navigable-list#navigate dialog:show@document->navigable-list#reset keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside",
-      controller: "navigable-list", 
-      dialog_target: "dialog",  
+      controller: "navigable-list",
+      dialog_target: "dialog",
       navigable_list_actionable_items_value: "true",
       navigable_list_reverse_navigation_value: "true" },
       turbo_permanent: true do %>
@@ -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 flex align-center gap-half">Pinned <% if platform.desktop? -%><kbd>P</kbd><% end %></span>
     </div>
   </button>
 </section>
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index a009835a4..7fd5f3115 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 flex align-center gap-half">Notifications <% if platform.desktop? -%><kbd>N</kbd><% end %></span>
     </div>
   </button>
 </section>

From aafe8ffa8024e07e711247e2bfa0261586b2b183 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 31 Oct 2025 11:34:42 -0500
Subject: [PATCH 2/2] Don't goof with mobile

---
 app/assets/stylesheets/trays.css       | 4 ++++
 app/views/bar/_bar.html.erb            | 2 +-
 app/views/my/pins/_tray.html.erb       | 2 +-
 app/views/notifications/_tray.html.erb | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 54096b88e..519baca57 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -87,6 +87,10 @@
       display: none;
     }
 
+    .tray__toggle-text {
+      display: contents;
+    }
+
     @media (max-width: 799px) {
       /* When collapsed on mobile, make it small */
       .tray__dialog:not([open]) ~ & {
diff --git a/app/views/bar/_bar.html.erb b/app/views/bar/_bar.html.erb
index a1eb72343..4858ce2a8 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="flex align-center gap-half">Search <% if platform.desktop? -%><kbd>K</kbd><% end %></span>
+      <span class="display-contents">Search <% if platform.desktop? -%><kbd>K</kbd><% end %></span>
     <% end %>
   </div>
 
diff --git a/app/views/my/pins/_tray.html.erb b/app/views/my/pins/_tray.html.erb
index 9fd3aacb3..aa3a5d4e2 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 flex align-center gap-half">Pinned <% if platform.desktop? -%><kbd>P</kbd><% end %></span>
+      <span class="tray__toggle-text">Pinned <% if platform.desktop? -%><kbd>P</kbd><% end %></span>
     </div>
   </button>
 </section>
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index 7fd5f3115..a009835a4 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 flex align-center gap-half">Notifications <% if platform.desktop? -%><kbd>N</kbd><% end %></span>
+      <span class="tray__toggle-text">Notifications <% if platform.desktop? -%><kbd>N</kbd><% end %></span>
     </div>
   </button>
 </section>