Straighten out icon and radio sizes

app/assets/stylesheets/icons.css

@@ -7,8 +7,9 @@
     flex-shrink: 0;
     inline-size: var(--icon-size, 1em);
     mask-image: var(--svg);
+    mask-position: center;
     mask-repeat: no-repeat;
-    mask-size: cover;
+    mask-size: var(--icon-size, 1em);
     pointer-events: none;
     user-select: none;
   }

app/assets/stylesheets/popup.css

@@ -5,6 +5,9 @@
     --panel-size: auto;
     --btn-background: transparent;
 
+    --popup-icon-size: 24px;
+    --popup-item-padding-inline: var(--inline-space-half);
+
     inset: 0 auto auto 50%;
     max-block-size: 80vh;
     min-inline-size: min(25ch, calc(100dvw - var(--block-space-double)));
@@ -68,7 +71,7 @@
     margin: 0;
     max-inline-size: 100%;
     padding: 0;
-    row-gap: 2px;
+    row-gap: 1px;
 
     /* Hide lists when all the items within are hidden */
     &:has(.popup__section-title:only-child),
@@ -85,10 +88,6 @@
     inline-size: 100%;
     max-inline-size: 100%;
 
-    /* .popup__list &:has(*:first-child:not(.popup__btn)) {
-      padding-inline-start: var(--inline-space-half);
-    } */
-
     @media (any-hover: hover) {
       &:hover {
         background: var(--color-ink-lightest);
@@ -104,6 +103,14 @@
         }
       }
     }
+
+    &:has(> :first-child:not(.popup__btn)) {
+      padding-inline-start: var(--popup-item-padding-inline);
+    }
+
+    &:has(> :last-child:not(.popup__btn)) {
+      padding-inline-end: var(--popup-item-padding-inline);
+    }
   }
 
   /* The actionable thing with padding within popup__item */
@@ -111,20 +118,16 @@
     --btn-background: transparent;
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
-    --btn-font-weight: 500;
-    --btn-padding: var(--inline-space-half) var(--inline-space);
 
     flex: 1 1 auto;
+    font-weight: 500;
     justify-content: start;
     inline-size: 100%;
     min-inline-size: 0;
     max-inline-size: 100%;
+    padding: var(--inline-space-half) var(--popup-item-padding-inline);
     text-align: start;
 
-    .icon {
-      --icon-size: 1em;
-    }
-
     &:has(input:checked)  {
       --btn-background: transparent;
       --btn-color: var(--color-ink);
@@ -141,6 +144,24 @@
     }
   }
 
+  .popup__icon {
+    --icon-size: 1em;
+
+    inline-size: var(--popup-icon-size);
+  }
+
+  .popup__radio {
+    --icon-size: var(--text-x-small);
+
+    block-size: var(--popup-icon-size);
+    inline-size: var(--popup-icon-size);
+    flex-shrink: 0;
+
+    &:hover {
+      --btn-border-color: var(--color-ink);
+    }
+  }
+
   .popup__footer {
     background-color: var(--color-canvas);
     border-block-start: 1px solid var(--color-ink-lighter);

app/helpers/filters_helper.rb

@@ -17,7 +17,7 @@ module FiltersHelper
 
   def filter_place_menu_item(path, label, icon)
     tag.li class: "popup__item", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do
-      concat icon_tag(icon)
+      concat icon_tag(icon, class: "popup__icon")
       concat(link_to(path, class: "popup__btn btn") do
         concat tag.span(label, class: "overflow-ellipsis")
         concat tag.span(" ›", class: "translucent flex-item-no-shrink flex-item-justify-end")

app/views/filters/menu/collections/_all_option.html.erb

@@ -2,7 +2,7 @@
 
 <% if Current.user.collections.many? %>
   <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-all">
-    <%= link_to clear_url_path, class: "btn txt-xx-small flex-item-no-shrink" do %>
+    <%= link_to clear_url_path, class: "popup__radio btn" do %>
       <%= check_box_tag "filter_collections", nil, user_filtering.collections.blank?, class: "form-checkbox" %>
       <span class="for-screen-reader">
         See everything in all collections

app/views/filters/menu/collections/_collection.html.erb

@@ -1,5 +1,5 @@
 <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-<%= collection.id %>">
-  <label class="btn txt-xx-small">
+  <label class="popup__radio btn">
     <%= form.check_box "collection_ids[]", {
           checked: user_filtering.filter.collections.include?(collection),
           data: { action: "change->form#submit" },

app/views/filters/menu/custom/_create.html.erb

@@ -1,9 +1,6 @@
 <li class="popup__item overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item" id="filter-custom-create">
+  <%= icon_tag "bookmark", class: "popup__icon" %>
   <%= link_to cards_path(expand_all: true), class: "popup__btn btn" do %>
-    <%= icon_tag "bookmark" %>
-    <div class="flex flex-column txt-tight-lines min-width txt-small">
-      <strong class="overflow-ellipsis">Create a new filter</strong>
-    </div>
-    <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>
+    Create a new filter
   <% end %>
 </li>

app/views/filters/menu/tags/_tag.html.erb

@@ -1,5 +1,5 @@
 <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-tag-#{tag.id}" %>">
-  <%= icon_tag "tag" %>
+  <%= icon_tag "tag", class: "popup__icon" %>
   <%= link_to cards_path(tag_ids: [tag]), class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>

app/views/filters/menu/users/_user.html.erb

@@ -1,5 +1,5 @@
 <li class="popup__item" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-user-#{user.id}" %>">
-  <%= icon_tag "person" %>
+  <%= icon_tag "person", class: "popup__icon" %>
   <%= link_to user, class: "popup__btn btn" do %>
     <span class="overflow-ellipsis"><%= user.name %></span>
     <span class="translucent flex-item-no-shrink flex-item-justify-end"> ›</span>