From 9c4a35986513d88ba16571ee3b12e5bf0a4e128f Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 12 May 2025 21:50:32 -0500
Subject: [PATCH] Ensure checkboxes in menus have full size click targets

---
 .../cards/index/_collections_filter.html.erb  | 10 ++++----
 .../filter/_all_collections_option.html.erb   | 23 ++++++++-----------
 .../events/filter/_collection_option.html.erb |  4 ++--
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/app/views/cards/index/_collections_filter.html.erb b/app/views/cards/index/_collections_filter.html.erb
index 86c4592ee..b735a29c8 100644
--- a/app/views/cards/index/_collections_filter.html.erb
+++ b/app/views/cards/index/_collections_filter.html.erb
@@ -5,7 +5,7 @@
   <% end %>
 
   <% if Current.user.collections.one? %>
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center", style: "--hover-size: 0" do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center" do %>
       <%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
         <span class="overflow-ellipsis"><%= Current.user.collections.first.name %></span>
         <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
@@ -13,14 +13,14 @@
     <% end %>
   <% elsif Current.user.collections.many? %>
     <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center", style: "--hover-size: 0" do %>
-      <div class="btn txt-xx-small flex-item-no-shrink">
+      <label class="btn txt-xx-small flex-item-no-shrink" style="--hover-size: 0.15rem">
         <input type="checkbox" <%= "checked" if filter.collection_ids.empty? %>>
 
         <span class="for-screen-reader">
           See everything in all collections
         </span>
         <%= icon_tag "check", size: 18, class: "checked" %>
-      </div>
+      </label>
       <%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
         <span class="overflow-ellipsis">All collections</span>
         <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
@@ -29,7 +29,7 @@
 
     <% Current.user.collections.order(:name).each do |collection| %>
       <li class="popup__group flex align-center" data-value="<%= collection.name.downcase %>">
-        <div class="btn txt-xx-small flex-item-no-shrink">
+        <label class="btn txt-xx-small flex-item-no-shrink">
           <%= form.check_box "collection_ids[]", {
                 checked: filter.collections.include?(collection),
                 data: { action: "change->form#submit" },
@@ -40,7 +40,7 @@
             Toggle filter for <%= collection.name %>
           </span>
           <%= icon_tag "check", size: 18, class: "checked" %>
-        </div>
+        </label>
 
         <%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
           <span class="overflow-ellipsis"><%= collection.name %></span>
diff --git a/app/views/events/filter/_all_collections_option.html.erb b/app/views/events/filter/_all_collections_option.html.erb
index 24ab518df..0f57357c9 100644
--- a/app/views/events/filter/_all_collections_option.html.erb
+++ b/app/views/events/filter/_all_collections_option.html.erb
@@ -6,21 +6,18 @@
     <% end %>
   <% end %>
 <% elsif Current.user.collections.many? %>
-  <div class="popup__group flex align-center" style="--hover-size: 0">
-  <div class="btn txt-xx-small flex-item-no-shrink">
-    <%= link_to events_path(clear_filter: true), style: "--hover-size: 0" do %>
+  <div class="popup__group flex align-center">
+    <%= link_to events_path(clear_filter: true), class: "btn txt-xx-small flex-item-no-shrink" do %>
       <%= check_box_tag "filter_collections", nil, filter.collections.blank?, class: "form-checkbox" %>
+      <span class="for-screen-reader">
+        See everything in all collections
+      </span>
+      <%= icon_tag "check", size: 18, class: "checked" %>
     <% end %>
 
-    <span class="for-screen-reader">
-      See everything in all collections
-    </span>
-    <%= icon_tag "check", size: 18, class: "checked" %>
-  </div>
-
-  <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "btn popup__item min-width flex-item-grow" do %>
-    <span class="overflow-ellipsis">All collections</span>
-    <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
-  <% end %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "btn popup__item min-width flex-item-grow" do %>
+      <span class="overflow-ellipsis">All collections</span>
+      <span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> ›</span>
+    <% end %>
   </div>
 <% end %>
\ No newline at end of file
diff --git a/app/views/events/filter/_collection_option.html.erb b/app/views/events/filter/_collection_option.html.erb
index bdc2877b6..b2c2bc77e 100644
--- a/app/views/events/filter/_collection_option.html.erb
+++ b/app/views/events/filter/_collection_option.html.erb
@@ -1,5 +1,5 @@
 <li class="popup__group flex align-center" data-value="<%= collection.name.downcase %>">
-  <div class="btn txt-xx-small">
+  <label class="btn txt-xx-small">
     <%= form.check_box "collection_ids[]", {
           checked: filter.collections.include?(collection),
           data: { action: "change->form#submit" },
@@ -10,7 +10,7 @@
       Toggle filter for <%= collection.name %>
     </span>
     <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
-  </div>
+  </label>
 
   <%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
     <span class="overflow-ellipsis"><%= collection.name %></span>