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] 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>