Better padding and alignment for radio buttons in filter menu

app/assets/stylesheets/popup.css

@@ -76,6 +76,16 @@
     }
   }
 
+  .popup__list {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    margin: 0;
+    max-inline-size: 100%;
+    padding: 0;
+    row-gap: 2px;
+  }
+
   .popup__item {
     --btn-background: transparent;
     --btn-border-radius: 0.3em;
@@ -96,17 +106,17 @@
       }
     }
 
+    .icon {
+      block-size: 1em;
+      inline-size: 1em;
+    }
+
     &:has(input:checked)  {
       --btn-background: transparent;
       --btn-color: var(--color-ink);
 
-      .icon {
-        &.checked {
-          block-size: 1em;
-          display: block;
-          inline-size: 1em;
-          margin-inline-end: var(--inline-space);
-        }
+      .icon.checked {
+        display: block;
       }
 
       @media (any-hover: hover) {
@@ -117,14 +127,8 @@
     }
   }
 
-  .popup__list {
-    display: flex;
-    flex-direction: column;
-    inline-size: 100%;
-    margin: 0;
-    max-inline-size: 100%;
-    padding: 0;
-    row-gap: 2px;
+  .popup__radio {
+    margin-inline-start: var(--inline-space);
   }
 
   .popup__new {

app/views/cards/index/_collections_filter.html.erb

@@ -13,7 +13,7 @@
     <% end %>
   <% elsif Current.user.collections.many? %>
     <%= 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">
+      <label class="popup__radio btn txt-xx-small flex-item-no-shrink">
         <input type="checkbox" <%= "checked" if filter.collection_ids.empty? %>>
 
         <span class="for-screen-reader">
@@ -29,7 +29,7 @@
 
     <% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
       <li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
-        <label class="btn txt-xx-small flex-item-no-shrink">
+        <label class="popup__radio btn txt-xx-small flex-item-no-shrink">
           <%= form.check_box "collection_ids[]", {
                 checked: filter.collections.include?(collection),
                 data: { action: "change->form#submit" },