From 0bb93fd1daaf23008e10218a00d702f3e884753f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 20 Nov 2025 15:59:28 -0600
Subject: [PATCH 1/2] Show icons instead of hotkeys for btn--circle-mobile

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

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 458cdf46a..69c2a682d 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -109,9 +109,11 @@
       aspect-ratio: 1;
       padding: 0.5em;
 
+      kbd,
       span:last-of-type {
         display: none;
       }
+
     }
   }
 
diff --git a/app/views/events/index/_add_board_button.html.erb b/app/views/events/index/_add_board_button.html.erb
index 3af54a792..613252ff3 100644
--- a/app/views/events/index/_add_board_button.html.erb
+++ b/app/views/events/index/_add_board_button.html.erb
@@ -1,7 +1,7 @@
 <div class="header__actions header__actions--end">
   <div>
     <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile", data: { controller: "hotkey", action: "keydown.b@document->hotkey#click" } do %>
-      <%= icon_tag "board", class: "show-on-touch" %>
+      <%= icon_tag "board" %>
       <span class="overflow-ellipsis">Add a board</span>
       <kbd class="hide-on-touch">B</kbd>
     <% end %>
diff --git a/app/views/events/index/_add_card_button.html.erb b/app/views/events/index/_add_card_button.html.erb
index 59390375b..b653e89b5 100644
--- a/app/views/events/index/_add_card_button.html.erb
+++ b/app/views/events/index/_add_card_button.html.erb
@@ -1,7 +1,7 @@
 <div class="header__actions header__actions--start">
   <% if board = user_filtering.single_board_or_first %>
     <%= button_to board_cards_path(board), 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" %>
+      <%= icon_tag "add" %>
       <span class="overflow-ellipsis">Add a card</span>
       <kbd class="hide-on-touch">C</kbd>
     <% end %>

From db235979ad5892ec268497804f900c3e15402c12 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 20 Nov 2025 16:12:39 -0600
Subject: [PATCH 2/2] A couple CSS tweaks

---
 app/assets/stylesheets/base.css             |  4 ++++
 app/assets/stylesheets/filters.css          | 22 ++++++++++++++++++---
 app/views/filters/settings/_toggle.html.erb |  3 ++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 5e5dad254..208c9d5d3 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -54,6 +54,10 @@
 
   ::selection {
     background-color: var(--color-selected);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-selected-dark);
+    }
   }
 
   :where(ul, ol):where([role="list"]) {
diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index e1c3f87e2..bc0ebdf98 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -1,4 +1,8 @@
 @layer components {
+  #header:has(.filters) {
+    position: relative;
+  }
+
   .filters {
     align-items: center;
     display: flex;
@@ -13,10 +17,10 @@
       --btn-border-color: var(--color-ink-medium);
       --input-background: var(--color-canvas);
     }
-  }
 
-  #header:has(.filters) {
-    position: relative;
+    &:has(.filter-toggle:hover) {
+      z-index: calc(var(--z-nav) + 1);
+    }
   }
 
   .filter {
@@ -170,5 +174,17 @@
   .filters--has-filters-set .filters__manage {
     display: flex;
   }
+
+  .filters__show-when-expanded {
+    .filters:not(.filters--expanded) & {
+      display: none;
+    }
+  }
+
+  .filters__show-when-collapsed {
+    .filters--expanded & {
+      display: none;
+    }
+  }
 }
 
diff --git a/app/views/filters/settings/_toggle.html.erb b/app/views/filters/settings/_toggle.html.erb
index d1e7d10bf..7df58eff8 100644
--- a/app/views/filters/settings/_toggle.html.erb
+++ b/app/views/filters/settings/_toggle.html.erb
@@ -8,6 +8,7 @@
 <% else %>
   <button type="button" class="btn txt-x-small filter-toggle" data-action="toggle-class#toggle toggle-enable#toggle" data-controller="tooltip">
     <%= icon_tag "filter" %>
-    <span class="for-screen-reader">Expand filter options</span>
+    <span class="filters__show-when-expanded for-screen-reader">Collapse filter options</span>
+    <span class="filters__show-when-collapsed for-screen-reader">Expand filter options</span>
   </button>
 <% end %>