From 67df61b57d7449031be50a46460f2fc66e6aee08 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 13:59:33 -0500
Subject: [PATCH] Dry up utility classes for popup__group

---
 app/assets/stylesheets/popup.css                     |  3 +++
 app/views/cards/assignments/new.html.erb             |  2 +-
 app/views/cards/display/perma/_collection.html.erb   |  2 +-
 app/views/cards/index/_collections_filter.html.erb   |  6 +++---
 app/views/cards/show/_collections.html.erb           |  6 +++---
 app/views/cards/taggings/new.html.erb                |  2 +-
 .../events/filter/_all_collections_option.html.erb   |  4 ++--
 app/views/events/filter/_collection_option.html.erb  |  2 +-
 app/views/events/filter/_custom_collections.html.erb |  4 ++--
 app/views/events/filter/_header.html.erb             | 12 ++++++------
 app/views/events/filter/_tag.html.erb                |  2 +-
 app/views/events/filter/_user.html.erb               |  2 +-
 app/views/filters/_assignees.html.erb                |  4 ++--
 app/views/filters/_closers.html.erb                  |  2 +-
 app/views/filters/_creators.html.erb                 |  2 +-
 app/views/filters/_indexed_by.html.erb               |  2 +-
 app/views/filters/_tags.html.erb                     |  2 +-
 17 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index e0263b88a..2d797358a 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -48,8 +48,11 @@
   }
 
   .popup__group {
+    align-items: center;
     background: transparent;
     border-radius: 0.3em;
+    display: flex;
+    inline-size: 100%;
     max-inline-size: 100%;
 
     .btn {
diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb
index a790da13b..f0d557607 100644
--- a/app/views/cards/assignments/new.html.erb
+++ b/app/views/cards/assignments/new.html.erb
@@ -14,7 +14,7 @@
 
     <ul class="popup__list" data-filter-target="list">
       <% @collection.users.active.alphabetically.each do |user| %>
-        <li class="popup__group flex align-center full-width" data-filter-target="item" data-navigable-list-target="item">
+        <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
           <%= button_to card_assignments_path(@card, params: { assignee_id: user.id }), method: :post,
               class: "popup__item btn",
               form_class: "max-width flex-item-grow" do %>
diff --git a/app/views/cards/display/perma/_collection.html.erb b/app/views/cards/display/perma/_collection.html.erb
index 565865219..72216b8b3 100644
--- a/app/views/cards/display/perma/_collection.html.erb
+++ b/app/views/cards/display/perma/_collection.html.erb
@@ -21,7 +21,7 @@
 
         <ul class="popup__list margin-block-start-half margin-none-block-end" data-filter-target="list">
           <% Current.user.collections.alphabetically.each do |collection| %>
-            <li class="popup__group flex align-center full-width" data-filter-target="item" data-navigable-list-target="item">
+            <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
               <%= button_to card_collection_path(card, params: { collection_id: collection.id }), method: :patch,
                   class: "popup__item btn",
                   form_class: "max-width flex-item-grow" do %>
diff --git a/app/views/cards/index/_collections_filter.html.erb b/app/views/cards/index/_collections_filter.html.erb
index 042c1189f..f492a652b 100644
--- a/app/views/cards/index/_collections_filter.html.erb
+++ b/app/views/cards/index/_collections_filter.html.erb
@@ -5,14 +5,14 @@
   <% end %>
 
   <% if Current.user.collections.one? %>
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center", data: { filter_target: "item", navigable_list_target: "item" } do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
       <%= tag.div class: "popup__item btn" 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>
       <% end %>
     <% end %>
   <% elsif Current.user.collections.many? %>
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center", data: { filter_target: "item", navigable_list_target: "item" } do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
       <label class="btn txt-xx-small flex-item-no-shrink">
         <input type="checkbox" <%= "checked" if filter.collection_ids.empty? %>>
 
@@ -28,7 +28,7 @@
     <% end %>
 
     <% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
-      <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+      <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
         <label class="btn txt-xx-small flex-item-no-shrink">
           <%= form.check_box "collection_ids[]", {
                 checked: filter.collections.include?(collection),
diff --git a/app/views/cards/show/_collections.html.erb b/app/views/cards/show/_collections.html.erb
index 0c7aa375e..ba5b2210f 100644
--- a/app/views/cards/show/_collections.html.erb
+++ b/app/views/cards/show/_collections.html.erb
@@ -2,14 +2,14 @@
 <%= form_with url: cards_path, method: :get, class: "popup__list",
       data: { controller: "form" } do |form| %>
   <% if Current.user.collections.one? %>
-    <%= link_to cards_path, class: "popup__group flex align-center", data: { filter_target: "item", navigable_list_target: "item" } do %>
+    <%= link_to cards_path, class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
       <%= tag.div class: "popup__item btn" 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>
       <% end %>
     <% end %>
   <% elsif Current.user.collections.many? %>
-    <%= link_to cards_path, class: "popup__group flex align-center", data: { filter_target: "item", navigable_list_target: "item" } do %>
+    <%= link_to cards_path, class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
       <label class="btn txt-xx-small flex-item-no-shrink">
         <input type="checkbox">
 
@@ -25,7 +25,7 @@
     <% end %>
 
     <% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
-      <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+      <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
         <label class="btn txt-xx-small flex-item-no-shrink">
           <%= form.check_box "collection_ids[]", {
                 checked: collection == @collection,
diff --git a/app/views/cards/taggings/new.html.erb b/app/views/cards/taggings/new.html.erb
index bbda823a1..5ff4b3bf0 100644
--- a/app/views/cards/taggings/new.html.erb
+++ b/app/views/cards/taggings/new.html.erb
@@ -15,7 +15,7 @@
 
     <ul class="popup__list" data-filter-target="list">
       <% @tags.each do |tag| %>
-        <li class="popup__group flex align-center full-width" data-filter-target="item" data-navigable-list-target="item">
+        <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
           <%= button_to card_taggings_path(@card, params: { tag_title: tag.title }), method: :post,
               class: "popup__item btn",
               form_class: "max-width flex-item-grow" do %>
diff --git a/app/views/events/filter/_all_collections_option.html.erb b/app/views/events/filter/_all_collections_option.html.erb
index d8b71a62d..961fad266 100644
--- a/app/views/events/filter/_all_collections_option.html.erb
+++ b/app/views/events/filter/_all_collections_option.html.erb
@@ -1,12 +1,12 @@
 <% if Current.user.collections.one? %>
-  <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group flex align-center", data: { filter_target: "item", navigable_list_target: "item" } do %>
+  <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
     <%= tag.div class: "popup__item btn" 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>
     <% end %>
   <% end %>
 <% elsif Current.user.collections.many? %>
-  <div class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+  <div class="popup__group" data-filter-target="item" data-navigable-list-target="item">
     <%= 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">
diff --git a/app/views/events/filter/_collection_option.html.erb b/app/views/events/filter/_collection_option.html.erb
index 7e898a661..a8b12e6b9 100644
--- a/app/views/events/filter/_collection_option.html.erb
+++ b/app/views/events/filter/_collection_option.html.erb
@@ -1,4 +1,4 @@
-<li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
   <label class="btn txt-xx-small">
     <%= form.check_box "collection_ids[]", {
           checked: filter.collections.include?(collection),
diff --git a/app/views/events/filter/_custom_collections.html.erb b/app/views/events/filter/_custom_collections.html.erb
index 9f543272d..7283b44ec 100644
--- a/app/views/events/filter/_custom_collections.html.erb
+++ b/app/views/events/filter/_custom_collections.html.erb
@@ -1,5 +1,5 @@
 <strong class="popup__group-title">Saved filters</strong>
-<div class="popup__group flex align-center full-width gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item">
+<div class="popup__group gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item">
   <%= link_to cards_path(expand_all: true), class: "btn popup__new popup__item" do %>
     <%= icon_tag "bookmark" %>
     <div class="flex flex-column txt-tight-lines min-width txt-small">
@@ -9,7 +9,7 @@
   <% end %>
 </div>
 <% @filters.each do |filter| %>
-  <div class="popup__group flex align-center full-width gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
+  <div class="popup__group gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
     <%= link_to cards_path(filter_id: filter.id), class: "btn popup__new popup__item" do %>
       <%= icon_tag "bookmark" %>
       <div class="flex flex-column txt-tight-lines min-width txt-small">
diff --git a/app/views/events/filter/_header.html.erb b/app/views/events/filter/_header.html.erb
index 9066fff77..c53e39d19 100644
--- a/app/views/events/filter/_header.html.erb
+++ b/app/views/events/filter/_header.html.erb
@@ -1,35 +1,35 @@
 <div class="flex flex-wrap align-center justify-center full-width max-width fizzy-menu__hotkeys">
-  <%= link_to root_path, class: "btn popup__group borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.1@document->hotkey#click keydown.shift+1@document->hotkey#click" } do %>
+  <%= link_to root_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.1@document->hotkey#click keydown.shift+1@document->hotkey#click" } do %>
     <%= icon_tag "home" %>
     <span>Home</span>
     <kbd>1</kbd>
   <% end %>
 
-  <%= link_to cards_path(assignee_ids: [Current.user.id]), class: "btn popup__group borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.2@document->hotkey#click keydown.shift+2@document->hotkey#click" } do %>
+  <%= link_to cards_path(assignee_ids: [Current.user.id]), class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.2@document->hotkey#click keydown.shift+2@document->hotkey#click" } do %>
     <%= icon_tag "clipboard" %>
     <span>Assigned to me</span>
     <kbd>2</kbd>
   <% end %>
 
-  <%= link_to cards_path(creator_ids: [Current.user.id]), class: "btn popup__group borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.3@document->hotkey#click keydown.shift+3@document->hotkey#click" } do %>
+  <%= link_to cards_path(creator_ids: [Current.user.id]), class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.3@document->hotkey#click keydown.shift+3@document->hotkey#click" } do %>
     <%= icon_tag "person-add" %>
     <span>Added by me</span>
     <kbd>3</kbd>
   <% end %>
 
-  <%= link_to new_collection_path, class: "btn popup__group borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.4@document->hotkey#click keydown.shift+4@document->hotkey#click" } do %>
+  <%= link_to new_collection_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.4@document->hotkey#click keydown.shift+4@document->hotkey#click" } do %>
     <%= icon_tag "collection-add" %>
     <span>New Collection</span>
     <kbd>4</kbd>
   <% end %>
 
-  <%= link_to notifications_path, class: "btn popup__group borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.5@document->hotkey#click keydown.shift+5@document->hotkey#click" } do %>
+  <%= link_to notifications_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.5@document->hotkey#click keydown.shift+5@document->hotkey#click" } do %>
     <%= icon_tag "bell" %>
     <span>Notifications</span>
     <kbd>5</kbd>
   <% end %>
 
-  <%= link_to account_settings_path, class: "btn popup__group borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.6@document->hotkey#click keydown.shift+6@document->hotkey#click" } do %>
+  <%= link_to account_settings_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.6@document->hotkey#click keydown.shift+6@document->hotkey#click" } do %>
     <%= icon_tag "settings" %>
     <span>Settings</span>
     <kbd>6</kbd>
diff --git a/app/views/events/filter/_tag.html.erb b/app/views/events/filter/_tag.html.erb
index fc925aef4..6542eb4d4 100644
--- a/app/views/events/filter/_tag.html.erb
+++ b/app/views/events/filter/_tag.html.erb
@@ -1,4 +1,4 @@
-<li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
   <%= icon_tag "tag" %>
   <%= link_to cards_path(tag_ids: [ tag ]), class: "popup__item btn" do %>
     <span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
diff --git a/app/views/events/filter/_user.html.erb b/app/views/events/filter/_user.html.erb
index c31fca0d9..d3379c526 100644
--- a/app/views/events/filter/_user.html.erb
+++ b/app/views/events/filter/_user.html.erb
@@ -1,4 +1,4 @@
-<li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
   <%= icon_tag "person" %>
   <%= link_to user, class: "popup__item btn" do %>
     <span class="overflow-ellipsis"><%= user.name %></span>
diff --git a/app/views/filters/_assignees.html.erb b/app/views/filters/_assignees.html.erb
index 553c8bd25..a912da421 100644
--- a/app/views/filters/_assignees.html.erb
+++ b/app/views/filters/_assignees.html.erb
@@ -27,7 +27,7 @@
       <% end %>
 
       <ul class="popup__list" data-filter-target="list">
-        <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+        <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
           <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
             <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
               <%= filter_hidden_field_tag key, value %>
@@ -50,7 +50,7 @@
           <% end %>
         </li>
         <% User.active.order(:name).each do |user| %>
-          <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+          <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
diff --git a/app/views/filters/_closers.html.erb b/app/views/filters/_closers.html.erb
index 2162cef09..50711eb2e 100644
--- a/app/views/filters/_closers.html.erb
+++ b/app/views/filters/_closers.html.erb
@@ -27,7 +27,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% User.active.order(:name).each do |user| %>
-          <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+          <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:closer_ids).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
diff --git a/app/views/filters/_creators.html.erb b/app/views/filters/_creators.html.erb
index cba376fd4..1028803f2 100644
--- a/app/views/filters/_creators.html.erb
+++ b/app/views/filters/_creators.html.erb
@@ -27,7 +27,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% User.active.order(:name).each do |user| %>
-          <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+          <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:creator_ids).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
diff --git a/app/views/filters/_indexed_by.html.erb b/app/views/filters/_indexed_by.html.erb
index b5a7fe28e..bf0480d64 100644
--- a/app/views/filters/_indexed_by.html.erb
+++ b/app/views/filters/_indexed_by.html.erb
@@ -17,7 +17,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% Filter::INDEXES.each do |index| %>
-          <li class="popup__group flex align-center" data-navigable-list-target="item">
+          <li class="popup__group" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:indexed_by).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>
diff --git a/app/views/filters/_tags.html.erb b/app/views/filters/_tags.html.erb
index ced212714..32fcd885d 100644
--- a/app/views/filters/_tags.html.erb
+++ b/app/views/filters/_tags.html.erb
@@ -26,7 +26,7 @@
 
       <ul class="popup__list" data-filter-target="list">
         <% Tag.order(:title).each do |tag| %>
-          <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
+          <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
             <%= form_with url: cards_path, method: :get, class: "full-width", data: { controller: "form" } do |form| %>
               <% filter.as_params.except(:tag_ids).each do |key, value| %>
                 <%= filter_hidden_field_tag key, value %>