A couple CSS tweaks

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"]) {

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;
+    }
+  }
 }
 

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