From 1e62ae8c9472ad9041f22434dfaf9f4c2216fa6e Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 13:32:56 -0500
Subject: [PATCH 01/12] Set min-width on popup__items

---
 app/assets/stylesheets/popup.css                         | 1 +
 app/views/cards/assignments/new.html.erb                 | 2 +-
 app/views/cards/display/perma/_collection.html.erb       | 2 +-
 app/views/cards/index/_closure_filter.html.erb           | 4 ++--
 app/views/cards/index/_collections_filter.html.erb       | 6 +++---
 app/views/cards/index/_workflow_filter.html.erb          | 4 ++--
 app/views/cards/show/_collections.html.erb               | 6 +++---
 app/views/cards/taggings/new.html.erb                    | 2 +-
 app/views/events/filter/_all_collections_option.html.erb | 4 ++--
 app/views/events/filter/_collection_option.html.erb      | 2 +-
 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                   | 4 ++--
 app/views/filters/_stages.html.erb                       | 2 +-
 app/views/filters/_tags.html.erb                         | 4 ++--
 app/views/filters/_time_window.html.erb                  | 2 +-
 19 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 1b158f9e6..aeb6f3e25 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -83,6 +83,7 @@
 
     flex: 1 1 auto;
     justify-content: start;
+    min-inline-size: 0;
     max-inline-size: 100%;
     text-align: start;
 
diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb
index fc393908a..3bcb14047 100644
--- a/app/views/cards/assignments/new.html.erb
+++ b/app/views/cards/assignments/new.html.erb
@@ -16,7 +16,7 @@
       <% @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">
           <%= button_to card_assignments_path(@card, params: { assignee_id: user.id }), method: :post,
-              class: "btn popup__item min-width flex-item-grow full-width unpad-inline",
+              class: "popup__item btn flex-item-grow full-width unpad-inline",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.assignees.include?(user) %>
diff --git a/app/views/cards/display/perma/_collection.html.erb b/app/views/cards/display/perma/_collection.html.erb
index a2d77283e..a5a4648db 100644
--- a/app/views/cards/display/perma/_collection.html.erb
+++ b/app/views/cards/display/perma/_collection.html.erb
@@ -23,7 +23,7 @@
           <% 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">
               <%= button_to card_collection_path(card, params: { collection_id: collection.id }), method: :patch,
-                  class: "btn popup__item min-width flex-item-grow full-width unpad-inline",
+                  class: "popup__item btn flex-item-grow full-width unpad-inline",
                   form_class: "max-width flex-item-grow" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
                 <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if card.collection == collection %>
diff --git a/app/views/cards/index/_closure_filter.html.erb b/app/views/cards/index/_closure_filter.html.erb
index 49116a255..b6bbcdae0 100644
--- a/app/views/cards/index/_closure_filter.html.erb
+++ b/app/views/cards/index/_closure_filter.html.erb
@@ -13,12 +13,12 @@
         <%= filter_hidden_field_tag key, value %>
       <% end %>
 
-      <%= link_to cards_path(filter.as_params.except(:closure_reason_ids)), class: "btn popup__item" do %>
+      <%= link_to cards_path(filter.as_params.except(:closure_reason_ids)), class: "popup__item btn" do %>
         <span class="overflow-ellipsis">All recently closed</span>
       <% end %>
 
       <% Closure::Reason.all.each do |reason| %>
-        <div class="btn popup__item">
+        <div class="popup__item btn">
           <%= form.check_box :closure_reason_ids, {
                 multiple: true,
                 checked: false,
diff --git a/app/views/cards/index/_collections_filter.html.erb b/app/views/cards/index/_collections_filter.html.erb
index ce9b5079d..ae01635c5 100644
--- a/app/views/cards/index/_collections_filter.html.erb
+++ b/app/views/cards/index/_collections_filter.html.erb
@@ -6,7 +6,7 @@
 
   <% 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 %>
-      <%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
+      <%= tag.div class: "popup__item btn 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>
       <% end %>
@@ -21,7 +21,7 @@
         </span>
         <%= icon_tag "check", size: 18, class: "checked" %>
       </label>
-      <%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
+      <%= tag.div class: "popup__item btn 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 %>
@@ -42,7 +42,7 @@
           <%= icon_tag "check", size: 18, class: "checked" %>
         </label>
 
-        <%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
+        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn flex-item-grow" do %>
           <span class="overflow-ellipsis"><%= collection.name %></span>
           <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
         <% end %>
diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb
index e0f9dea0b..018fc2045 100644
--- a/app/views/cards/index/_workflow_filter.html.erb
+++ b/app/views/cards/index/_workflow_filter.html.erb
@@ -17,12 +17,12 @@
         <%= filter_hidden_field_tag key, value %>
       <% end %>
 
-      <%= link_to cards_path(filter.as_params.except(:stage_ids)), class: "btn popup__item" do %>
+      <%= link_to cards_path(filter.as_params.except(:stage_ids)), class: "popup__item btn" do %>
         <span class="overflow-ellipsis">All stages</span>
       <% end %>
 
       <% workflow.stages.each do |stage| %>
-        <div class="btn popup__item">
+        <div class="popup__item btn">
           <%= form.check_box :stage_ids, {
                 multiple: true,
                 checked: filter.stages.include?(stage),
diff --git a/app/views/cards/show/_collections.html.erb b/app/views/cards/show/_collections.html.erb
index 9339a280d..13f2d6077 100644
--- a/app/views/cards/show/_collections.html.erb
+++ b/app/views/cards/show/_collections.html.erb
@@ -3,7 +3,7 @@
       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 %>
-      <%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
+      <%= tag.div class: "popup__item btn 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>
       <% end %>
@@ -18,7 +18,7 @@
         </span>
         <%= icon_tag "check", size: 18, class: "checked" %>
       </label>
-      <%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
+      <%= tag.div class: "popup__item btn 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 %>
@@ -39,7 +39,7 @@
           <%= icon_tag "check", size: 18, class: "checked" %>
         </label>
 
-        <%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
+        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn flex-item-grow" do %>
           <span class="overflow-ellipsis"><%= collection.name %></span>
           <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
         <% end %>
diff --git a/app/views/cards/taggings/new.html.erb b/app/views/cards/taggings/new.html.erb
index 0a250007f..4e78bbbc6 100644
--- a/app/views/cards/taggings/new.html.erb
+++ b/app/views/cards/taggings/new.html.erb
@@ -17,7 +17,7 @@
       <% @tags.each do |tag| %>
         <li class="popup__group flex align-center full-width" data-filter-target="item" data-navigable-list-target="item">
           <%= button_to card_taggings_path(@card, params: { tag_title: tag.title }), method: :post,
-              class: "btn popup__item min-width flex-item-grow full-width unpad-inline",
+              class: "popup__item btn flex-item-grow full-width unpad-inline",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.tagged_with?(tag) %>
diff --git a/app/views/events/filter/_all_collections_option.html.erb b/app/views/events/filter/_all_collections_option.html.erb
index 3046de66d..dd2cb650b 100644
--- a/app/views/events/filter/_all_collections_option.html.erb
+++ b/app/views/events/filter/_all_collections_option.html.erb
@@ -1,6 +1,6 @@
 <% 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 %>
-    <%= tag.div class: "btn popup__item min-width flex-item-grow" do %>
+    <%= tag.div class: "popup__item btn 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>
     <% end %>
@@ -15,7 +15,7 @@
       <%= icon_tag "check", size: 18, class: "checked" %>
     <% end %>
 
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "btn popup__item min-width flex-item-grow" do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__item btn 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 %>
diff --git a/app/views/events/filter/_collection_option.html.erb b/app/views/events/filter/_collection_option.html.erb
index 44c584b13..32736b88f 100644
--- a/app/views/events/filter/_collection_option.html.erb
+++ b/app/views/events/filter/_collection_option.html.erb
@@ -12,7 +12,7 @@
     <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
   </label>
 
-  <%= link_to cards_path(collection_ids: [ collection ]), class: "btn popup__item min-width flex-item-grow" do %>
+  <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn flex-item-grow" do %>
     <span class="overflow-ellipsis"><%= collection.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
diff --git a/app/views/events/filter/_tag.html.erb b/app/views/events/filter/_tag.html.erb
index 8daafea37..27dff6b79 100644
--- a/app/views/events/filter/_tag.html.erb
+++ b/app/views/events/filter/_tag.html.erb
@@ -1,6 +1,6 @@
 <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
   <%= icon_tag "tag" %>
-  <%= link_to cards_path(tag_ids: [ tag ]), class: "btn popup__item min-width flex-item-grow" do %>
+  <%= link_to cards_path(tag_ids: [ tag ]), class: "popup__item btn flex-item-grow" do %>
     <span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
diff --git a/app/views/events/filter/_user.html.erb b/app/views/events/filter/_user.html.erb
index 0a19c3f93..6f1631159 100644
--- a/app/views/events/filter/_user.html.erb
+++ b/app/views/events/filter/_user.html.erb
@@ -1,6 +1,6 @@
 <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
   <%= icon_tag "person" %>
-  <%= link_to user, class: "btn popup__item min-width flex-item-grow" do %>
+  <%= link_to user, class: "popup__item btn flex-item-grow" do %>
     <span class="overflow-ellipsis"><%= user.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
diff --git a/app/views/filters/_assignees.html.erb b/app/views/filters/_assignees.html.erb
index 9eaeb6f5d..f93fdcc69 100644
--- a/app/views/filters/_assignees.html.erb
+++ b/app/views/filters/_assignees.html.erb
@@ -41,7 +41,7 @@
               <%= hidden_field_tag :expand_all, @expand_all %>
             <% end %>
 
-            <%= form.button type: "submit", class: "btn popup__item min-width full-width unpad-inline" do %>
+            <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
               <span class="overflow-ellipsis flex-item-grow">No one</span>
               <% if filter.assignment_status.unassigned? %>
                 <%= icon_tag "check", class: "checked flex-item-justify-end" %>
@@ -70,7 +70,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "btn popup__item min-width full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.assignees.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_closers.html.erb b/app/views/filters/_closers.html.erb
index a1d701d82..401c976be 100644
--- a/app/views/filters/_closers.html.erb
+++ b/app/views/filters/_closers.html.erb
@@ -47,7 +47,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "btn popup__item min-width full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.closers.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_creators.html.erb b/app/views/filters/_creators.html.erb
index 609344c3d..4d652f5fe 100644
--- a/app/views/filters/_creators.html.erb
+++ b/app/views/filters/_creators.html.erb
@@ -47,7 +47,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "btn popup__item min-width full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.creators.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_indexed_by.html.erb b/app/views/filters/_indexed_by.html.erb
index 37a22388f..cd84a8cd3 100644
--- a/app/views/filters/_indexed_by.html.erb
+++ b/app/views/filters/_indexed_by.html.erb
@@ -14,7 +14,7 @@
 				navigable_list_focus_on_selection_value: false,
 				navigable_list_actionable_items_value: true } do %>
       <strong class="popup__title txt-nowrap">Sort by…</strong>
-      
+
       <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">
@@ -29,7 +29,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "btn popup__item min-width full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= index.humanize %></span>
                 <% if filter.indexed_by == index %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_stages.html.erb b/app/views/filters/_stages.html.erb
index dffd2c5f9..c62ef603e 100644
--- a/app/views/filters/_stages.html.erb
+++ b/app/views/filters/_stages.html.erb
@@ -25,7 +25,7 @@
         <% end %>
 
         <% filter.stages.first.workflow.stages.each do |stage| %>
-          <div class="btn popup__item">
+          <div class="popup__item btn">
             <%= form.check_box :stage_ids, {
               multiple: true,
               checked: filter.stages.include?(stage),
diff --git a/app/views/filters/_tags.html.erb b/app/views/filters/_tags.html.erb
index e3e73e528..55f686090 100644
--- a/app/views/filters/_tags.html.erb
+++ b/app/views/filters/_tags.html.erb
@@ -23,7 +23,7 @@
         <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
               type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
       <% end %>
-      
+
       <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">
@@ -46,7 +46,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "btn popup__item min-width full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
                 <% if filter.tags.include?(tag) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_time_window.html.erb b/app/views/filters/_time_window.html.erb
index b2e966a96..195adb53c 100644
--- a/app/views/filters/_time_window.html.erb
+++ b/app/views/filters/_time_window.html.erb
@@ -17,7 +17,7 @@
         <% end %>
 
         <% TimeWindowParser::VALUES.each do |value| %>
-          <div class="btn popup__item">
+          <div class="popup__item btn">
             <%= form.radio_button name, value,
                   checked: filter.public_send(name) == value,
                   data: { action: "change->form#submit" } %>

From d3db752f3900298f3462dd7f6d3b1b615fc9327a Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 13:35:24 -0500
Subject: [PATCH 02/12] Remove redundant flex-grow class from popup__items

---
 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 +-
 app/views/events/filter/_all_collections_option.html.erb | 4 ++--
 app/views/events/filter/_collection_option.html.erb      | 2 +-
 app/views/events/filter/_tag.html.erb                    | 2 +-
 app/views/events/filter/_user.html.erb                   | 2 +-
 9 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb
index 3bcb14047..81d97d412 100644
--- a/app/views/cards/assignments/new.html.erb
+++ b/app/views/cards/assignments/new.html.erb
@@ -16,7 +16,7 @@
       <% @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">
           <%= button_to card_assignments_path(@card, params: { assignee_id: user.id }), method: :post,
-              class: "popup__item btn flex-item-grow full-width unpad-inline",
+              class: "popup__item btn full-width unpad-inline",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.assignees.include?(user) %>
diff --git a/app/views/cards/display/perma/_collection.html.erb b/app/views/cards/display/perma/_collection.html.erb
index a5a4648db..94d6a51f8 100644
--- a/app/views/cards/display/perma/_collection.html.erb
+++ b/app/views/cards/display/perma/_collection.html.erb
@@ -23,7 +23,7 @@
           <% 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">
               <%= button_to card_collection_path(card, params: { collection_id: collection.id }), method: :patch,
-                  class: "popup__item btn flex-item-grow full-width unpad-inline",
+                  class: "popup__item btn full-width unpad-inline",
                   form_class: "max-width flex-item-grow" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
                 <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if card.collection == collection %>
diff --git a/app/views/cards/index/_collections_filter.html.erb b/app/views/cards/index/_collections_filter.html.erb
index ae01635c5..042c1189f 100644
--- a/app/views/cards/index/_collections_filter.html.erb
+++ b/app/views/cards/index/_collections_filter.html.erb
@@ -6,7 +6,7 @@
 
   <% 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 %>
-      <%= tag.div class: "popup__item btn flex-item-grow" 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 %>
@@ -21,7 +21,7 @@
         </span>
         <%= icon_tag "check", size: 18, class: "checked" %>
       </label>
-      <%= tag.div class: "popup__item btn flex-item-grow" do %>
+      <%= tag.div class: "popup__item btn" 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 %>
@@ -42,7 +42,7 @@
           <%= icon_tag "check", size: 18, class: "checked" %>
         </label>
 
-        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn flex-item-grow" do %>
+        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn" do %>
           <span class="overflow-ellipsis"><%= collection.name %></span>
           <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
         <% end %>
diff --git a/app/views/cards/show/_collections.html.erb b/app/views/cards/show/_collections.html.erb
index 13f2d6077..0c7aa375e 100644
--- a/app/views/cards/show/_collections.html.erb
+++ b/app/views/cards/show/_collections.html.erb
@@ -3,7 +3,7 @@
       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 %>
-      <%= tag.div class: "popup__item btn flex-item-grow" 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 %>
@@ -18,7 +18,7 @@
         </span>
         <%= icon_tag "check", size: 18, class: "checked" %>
       </label>
-      <%= tag.div class: "popup__item btn flex-item-grow" do %>
+      <%= tag.div class: "popup__item btn" 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 %>
@@ -39,7 +39,7 @@
           <%= icon_tag "check", size: 18, class: "checked" %>
         </label>
 
-        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn flex-item-grow" do %>
+        <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn" do %>
           <span class="overflow-ellipsis"><%= collection.name %></span>
           <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
         <% end %>
diff --git a/app/views/cards/taggings/new.html.erb b/app/views/cards/taggings/new.html.erb
index 4e78bbbc6..0406c7bfe 100644
--- a/app/views/cards/taggings/new.html.erb
+++ b/app/views/cards/taggings/new.html.erb
@@ -17,7 +17,7 @@
       <% @tags.each do |tag| %>
         <li class="popup__group flex align-center full-width" 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 flex-item-grow full-width unpad-inline",
+              class: "popup__item btn full-width unpad-inline",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.tagged_with?(tag) %>
diff --git a/app/views/events/filter/_all_collections_option.html.erb b/app/views/events/filter/_all_collections_option.html.erb
index dd2cb650b..d8b71a62d 100644
--- a/app/views/events/filter/_all_collections_option.html.erb
+++ b/app/views/events/filter/_all_collections_option.html.erb
@@ -1,6 +1,6 @@
 <% 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 %>
-    <%= tag.div class: "popup__item btn flex-item-grow" 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 %>
@@ -15,7 +15,7 @@
       <%= icon_tag "check", size: 18, class: "checked" %>
     <% end %>
 
-    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__item btn flex-item-grow" do %>
+    <%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__item btn" 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 %>
diff --git a/app/views/events/filter/_collection_option.html.erb b/app/views/events/filter/_collection_option.html.erb
index 32736b88f..7e898a661 100644
--- a/app/views/events/filter/_collection_option.html.erb
+++ b/app/views/events/filter/_collection_option.html.erb
@@ -12,7 +12,7 @@
     <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
   </label>
 
-  <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn flex-item-grow" do %>
+  <%= link_to cards_path(collection_ids: [ collection ]), class: "popup__item btn" do %>
     <span class="overflow-ellipsis"><%= collection.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
diff --git a/app/views/events/filter/_tag.html.erb b/app/views/events/filter/_tag.html.erb
index 27dff6b79..fc925aef4 100644
--- a/app/views/events/filter/_tag.html.erb
+++ b/app/views/events/filter/_tag.html.erb
@@ -1,6 +1,6 @@
 <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
   <%= icon_tag "tag" %>
-  <%= link_to cards_path(tag_ids: [ tag ]), class: "popup__item btn flex-item-grow" do %>
+  <%= link_to cards_path(tag_ids: [ tag ]), class: "popup__item btn" do %>
     <span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>
diff --git a/app/views/events/filter/_user.html.erb b/app/views/events/filter/_user.html.erb
index 6f1631159..c31fca0d9 100644
--- a/app/views/events/filter/_user.html.erb
+++ b/app/views/events/filter/_user.html.erb
@@ -1,6 +1,6 @@
 <li class="popup__group flex align-center" data-filter-target="item" data-navigable-list-target="item">
   <%= icon_tag "person" %>
-  <%= link_to user, class: "popup__item btn flex-item-grow" do %>
+  <%= link_to user, class: "popup__item btn" do %>
     <span class="overflow-ellipsis"><%= user.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
   <% end %>

From 37cc6a69555e7663b3cf171161849114b910032a Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 13:37:33 -0500
Subject: [PATCH 03/12] popup__items full-width by default

---
 app/assets/stylesheets/popup.css                   | 1 +
 app/views/cards/assignments/new.html.erb           | 2 +-
 app/views/cards/display/perma/_collection.html.erb | 2 +-
 app/views/cards/taggings/new.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 +-
 9 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index aeb6f3e25..3258c9a87 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -83,6 +83,7 @@
 
     flex: 1 1 auto;
     justify-content: start;
+    inline-size: 100%;
     min-inline-size: 0;
     max-inline-size: 100%;
     text-align: start;
diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb
index 81d97d412..a161b631a 100644
--- a/app/views/cards/assignments/new.html.erb
+++ b/app/views/cards/assignments/new.html.erb
@@ -16,7 +16,7 @@
       <% @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">
           <%= button_to card_assignments_path(@card, params: { assignee_id: user.id }), method: :post,
-              class: "popup__item btn full-width unpad-inline",
+              class: "popup__item btn unpad-inline",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.assignees.include?(user) %>
diff --git a/app/views/cards/display/perma/_collection.html.erb b/app/views/cards/display/perma/_collection.html.erb
index 94d6a51f8..77ecad5b0 100644
--- a/app/views/cards/display/perma/_collection.html.erb
+++ b/app/views/cards/display/perma/_collection.html.erb
@@ -23,7 +23,7 @@
           <% 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">
               <%= button_to card_collection_path(card, params: { collection_id: collection.id }), method: :patch,
-                  class: "popup__item btn full-width unpad-inline",
+                  class: "popup__item btn unpad-inline",
                   form_class: "max-width flex-item-grow" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
                 <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if card.collection == collection %>
diff --git a/app/views/cards/taggings/new.html.erb b/app/views/cards/taggings/new.html.erb
index 0406c7bfe..6e551f812 100644
--- a/app/views/cards/taggings/new.html.erb
+++ b/app/views/cards/taggings/new.html.erb
@@ -17,7 +17,7 @@
       <% @tags.each do |tag| %>
         <li class="popup__group flex align-center full-width" 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 full-width unpad-inline",
+              class: "popup__item btn unpad-inline",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.tagged_with?(tag) %>
diff --git a/app/views/filters/_assignees.html.erb b/app/views/filters/_assignees.html.erb
index f93fdcc69..56bdb703c 100644
--- a/app/views/filters/_assignees.html.erb
+++ b/app/views/filters/_assignees.html.erb
@@ -41,7 +41,7 @@
               <%= hidden_field_tag :expand_all, @expand_all %>
             <% end %>
 
-            <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
+            <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
               <span class="overflow-ellipsis flex-item-grow">No one</span>
               <% if filter.assignment_status.unassigned? %>
                 <%= icon_tag "check", class: "checked flex-item-justify-end" %>
@@ -70,7 +70,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.assignees.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_closers.html.erb b/app/views/filters/_closers.html.erb
index 401c976be..3d8e77650 100644
--- a/app/views/filters/_closers.html.erb
+++ b/app/views/filters/_closers.html.erb
@@ -47,7 +47,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.closers.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_creators.html.erb b/app/views/filters/_creators.html.erb
index 4d652f5fe..ca5fcec27 100644
--- a/app/views/filters/_creators.html.erb
+++ b/app/views/filters/_creators.html.erb
@@ -47,7 +47,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.creators.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_indexed_by.html.erb b/app/views/filters/_indexed_by.html.erb
index cd84a8cd3..d5b17529a 100644
--- a/app/views/filters/_indexed_by.html.erb
+++ b/app/views/filters/_indexed_by.html.erb
@@ -29,7 +29,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= index.humanize %></span>
                 <% if filter.indexed_by == index %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_tags.html.erb b/app/views/filters/_tags.html.erb
index 55f686090..b3fff9264 100644
--- a/app/views/filters/_tags.html.erb
+++ b/app/views/filters/_tags.html.erb
@@ -46,7 +46,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn full-width unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
                 <% if filter.tags.include?(tag) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>

From 7e0df47c8fb0cc5eec8ea946adb02a7a8fc74f42 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 13:38:08 -0500
Subject: [PATCH 04/12] Same padding for all popup__items

---
 app/views/cards/assignments/new.html.erb           | 2 +-
 app/views/cards/display/perma/_collection.html.erb | 2 +-
 app/views/cards/taggings/new.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 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb
index a161b631a..a790da13b 100644
--- a/app/views/cards/assignments/new.html.erb
+++ b/app/views/cards/assignments/new.html.erb
@@ -16,7 +16,7 @@
       <% @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">
           <%= button_to card_assignments_path(@card, params: { assignee_id: user.id }), method: :post,
-              class: "popup__item btn unpad-inline",
+              class: "popup__item btn",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.assignees.include?(user) %>
diff --git a/app/views/cards/display/perma/_collection.html.erb b/app/views/cards/display/perma/_collection.html.erb
index 77ecad5b0..565865219 100644
--- a/app/views/cards/display/perma/_collection.html.erb
+++ b/app/views/cards/display/perma/_collection.html.erb
@@ -23,7 +23,7 @@
           <% 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">
               <%= button_to card_collection_path(card, params: { collection_id: collection.id }), method: :patch,
-                  class: "popup__item btn unpad-inline",
+                  class: "popup__item btn",
                   form_class: "max-width flex-item-grow" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
                 <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if card.collection == collection %>
diff --git a/app/views/cards/taggings/new.html.erb b/app/views/cards/taggings/new.html.erb
index 6e551f812..bbda823a1 100644
--- a/app/views/cards/taggings/new.html.erb
+++ b/app/views/cards/taggings/new.html.erb
@@ -17,7 +17,7 @@
       <% @tags.each do |tag| %>
         <li class="popup__group flex align-center full-width" 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 unpad-inline",
+              class: "popup__item btn",
               form_class: "max-width flex-item-grow" do %>
             <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
             <%= icon_tag "check", size: 18, class: "checked flex-item-no-shrink flex-item-justify-end", style: "--icon-size: 1em" if @card.tagged_with?(tag) %>
diff --git a/app/views/filters/_assignees.html.erb b/app/views/filters/_assignees.html.erb
index 56bdb703c..553c8bd25 100644
--- a/app/views/filters/_assignees.html.erb
+++ b/app/views/filters/_assignees.html.erb
@@ -41,7 +41,7 @@
               <%= hidden_field_tag :expand_all, @expand_all %>
             <% end %>
 
-            <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
+            <%= form.button type: "submit", class: "popup__item btn" do %>
               <span class="overflow-ellipsis flex-item-grow">No one</span>
               <% if filter.assignment_status.unassigned? %>
                 <%= icon_tag "check", class: "checked flex-item-justify-end" %>
@@ -70,7 +70,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.assignees.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_closers.html.erb b/app/views/filters/_closers.html.erb
index 3d8e77650..2162cef09 100644
--- a/app/views/filters/_closers.html.erb
+++ b/app/views/filters/_closers.html.erb
@@ -47,7 +47,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.closers.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_creators.html.erb b/app/views/filters/_creators.html.erb
index ca5fcec27..cba376fd4 100644
--- a/app/views/filters/_creators.html.erb
+++ b/app/views/filters/_creators.html.erb
@@ -47,7 +47,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
                 <% if filter.creators.include?(user) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_indexed_by.html.erb b/app/views/filters/_indexed_by.html.erb
index d5b17529a..b5a7fe28e 100644
--- a/app/views/filters/_indexed_by.html.erb
+++ b/app/views/filters/_indexed_by.html.erb
@@ -29,7 +29,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= index.humanize %></span>
                 <% if filter.indexed_by == index %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>
diff --git a/app/views/filters/_tags.html.erb b/app/views/filters/_tags.html.erb
index b3fff9264..ced212714 100644
--- a/app/views/filters/_tags.html.erb
+++ b/app/views/filters/_tags.html.erb
@@ -46,7 +46,7 @@
                 <%= hidden_field_tag :expand_all, @expand_all %>
               <% end %>
 
-              <%= form.button type: "submit", class: "popup__item btn unpad-inline" do %>
+              <%= form.button type: "submit", class: "popup__item btn" do %>
                 <span class="overflow-ellipsis flex-item-grow"><%= tag.hashtag %></span>
                 <% if filter.tags.include?(tag) %>
                   <%= icon_tag "check", class: "checked flex-item-justify-end" %>

From ace44d709e2e272debc134ccf8f7872bce228c6a Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 13:40:59 -0500
Subject: [PATCH 05/12] Inline padding for popup__items, not popup__groups

---
 app/assets/stylesheets/popup.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 3258c9a87..e0263b88a 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -51,7 +51,6 @@
     background: transparent;
     border-radius: 0.3em;
     max-inline-size: 100%;
-    padding-inline: var(--inline-space);
 
     .btn {
       --btn-background: transparent;
@@ -79,7 +78,7 @@
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
     --btn-font-weight: 500;
-    --btn-padding: var(--inline-space-half) 0 var(--inline-space-half) var(--inline-space);
+    --btn-padding: var(--inline-space-half) var(--inline-space);
 
     flex: 1 1 auto;
     justify-content: start;

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 06/12] 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 %>

From 06c2e6d0aaee3053b0a2e9548fbaa79443209eb5 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 14:03:15 -0500
Subject: [PATCH 07/12] Put animated popups within cascade layer

---
 app/assets/stylesheets/popup.css | 62 ++++++++++++++++----------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 2d797358a..2fbb56659 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -147,48 +147,48 @@
     padding-inline: var(--inline-space);
     text-transform: uppercase;
   }
-}
 
-.popup--animated {
-  --backdrop-speed: 150ms;
-  --speed: 150ms;
+  .popup--animated {
+    --backdrop-speed: 150ms;
+    --speed: 150ms;
 
-  opacity: 0;
-  transform: scale(0.2) translateX(-50%);
-  transform-origin: top left;
-  transition:
-      display var(--speed) allow-discrete,
-      opacity var(--speed),
-      overlay var(--speed) allow-discrete,
-      transform var(--speed);
-
-  &::backdrop {
-    background-color: var(--color-always-black);
     opacity: 0;
-    transform: scale(1);
+    transform: scale(0.2) translateX(-50%);
+    transform-origin: top left;
     transition:
-      display var(--backdrop-speed) allow-discrete,
-      opacity var(--backdrop-speed),
-      overlay var(--backdrop-speed) allow-discrete;
-  }
-
-  &[open] {
-    opacity: 1;
-    transform: scale(1) translateX(-50%);
+        display var(--speed) allow-discrete,
+        opacity var(--speed),
+        overlay var(--speed) allow-discrete,
+        transform var(--speed);
 
     &::backdrop {
-      opacity: 0.5;
+      background-color: var(--color-always-black);
+      opacity: 0;
+      transform: scale(1);
+      transition:
+        display var(--backdrop-speed) allow-discrete,
+        opacity var(--backdrop-speed),
+        overlay var(--backdrop-speed) allow-discrete;
     }
-  }
 
-  @starting-style {
     &[open] {
-      opacity: 0;
-      transform: scale(0.2) translateX(-50%);
+      opacity: 1;
+      transform: scale(1) translateX(-50%);
+
+      &::backdrop {
+        opacity: 0.5;
+      }
     }
 
-    &[open]::backdrop {
-      opacity: 0;
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: scale(0.2) translateX(-50%);
+      }
+
+      &[open]::backdrop {
+        opacity: 0;
+      }
     }
   }
 }

From 2cc9a40372a60b417cfd60242ab9d4aaa876dc47 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 16:09:43 -0500
Subject: [PATCH 08/12] Remove aspect ratio for closed stamps

---
 app/assets/stylesheets/card-columns.css | 1 -
 app/assets/stylesheets/cards.css        | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 3cd493293..19c00a4e0 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -306,7 +306,6 @@
         }
 
         .card__closed {
-          aspect-ratio: unset;
           border-width: 0.5ch;
           font-size: 0.75em;
           transform: none;
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index def62776d..aaf6056b1 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -290,20 +290,20 @@
 
   .card__closed {
     align-items: center;
-    aspect-ratio: 8/5;
-    border: 0.75ch solid var(--card-color);
     border-radius: 0.2em;
+    border: 0.75ch solid var(--card-color);
     color: var(--card-color);
     display: flex;
     flex-direction: column;
     font-weight: bold;
-    inset: auto var(--block-space) var(--block-space-double) auto;
+    inset: auto 1ch 1ch auto;
     justify-content: center;
     max-inline-size: 25ch;
     min-inline-size: 16ch;
     mix-blend-mode: multiply;
     padding: 1ch;
     position: absolute;
+    transform-origin: bottom left;
     transform: rotate(-10deg);
 
     @media (prefers-color-scheme: dark) {

From a49c97ad1cf64d30468b8d38e0998916e0f1781c Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 16:15:04 -0500
Subject: [PATCH 09/12] Nudge position when mini

---
 app/assets/stylesheets/card-columns.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 19c00a4e0..e6283c41a 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -308,6 +308,7 @@
         .card__closed {
           border-width: 0.5ch;
           font-size: 0.75em;
+          inset: auto 0 var(--block-space-double) auto;
           transform: none;
         }
 

From ed0492e2f42fc18e6584ef477bf08c251079cf58 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 16:30:56 -0500
Subject: [PATCH 10/12] Use smaller action size on mobile

---
 app/assets/stylesheets/events.css | 9 +++++++++
 app/views/events/index.html.erb   | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index fa1674f76..0b5b491e6 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -1,4 +1,13 @@
 @layer components {
+  /* Events header
+  /* ------------------------------------------------------------------------ */
+
+  .header.events-header {
+    @media (min-width: 640px) {
+      --header-actions-width: 7rem;
+    }
+  }
+
   /* Event column layout
   /* ------------------------------------------------------------------------ */
 
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 7bcf1fc15..66b1f1b3e 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -8,7 +8,7 @@
   </nav>
 <% end %>
 
-<header class="header margin-block-end" style="--header-button-count: 3;">
+<header class="events-header header margin-block-end">
   <div class="header__actions header__actions--start">
     <% if collection = @filter.single_collection || Current.user.collections.ordered_by_recently_accessed.first %>
       <%= button_to collection_cards_path(collection), method: :post, class: "btn btn--link btn--circle-mobile" do %>

From 7db9d972aa1bfe46d6d534b556c8318e3ab4ee5b Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 16:53:52 -0500
Subject: [PATCH 11/12] Don't justify content for avatar buttons to make FF
 happy

---
 app/assets/stylesheets/avatars.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css
index e3f15d4ab..7081edf80 100644
--- a/app/assets/stylesheets/avatars.css
+++ b/app/assets/stylesheets/avatars.css
@@ -22,6 +22,11 @@
       max-inline-size: 100%;
       object-fit: cover;
     }
+
+    /* FF fix */
+    &.btn {
+      justify-content: normal;
+    }
   }
 
   .avatar__form {

From a0ae6dccd6d285808eee9d9f1b5c5be377454ec1 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 21 Jul 2025 16:57:44 -0500
Subject: [PATCH 12/12] Move fix to the existing btn--circle class

---
 app/assets/stylesheets/avatars.css | 5 -----
 app/assets/stylesheets/buttons.css | 1 +
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css
index 7081edf80..e3f15d4ab 100644
--- a/app/assets/stylesheets/avatars.css
+++ b/app/assets/stylesheets/avatars.css
@@ -22,11 +22,6 @@
       max-inline-size: 100%;
       object-fit: cover;
     }
-
-    /* FF fix */
-    &.btn {
-      justify-content: normal;
-    }
   }
 
   .avatar__form {
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 49b9aafb3..5c787aeea 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -73,6 +73,7 @@
     block-size: var(--btn-size);
     display: grid;
     inline-size: var(--btn-size);
+    justify-content: normal; /* FF fix */
     place-items: center;
 
     > * {