Scroll users list, adjust layout

app/assets/stylesheets/users.css

@@ -0,0 +1,4 @@
+.users-list {
+  max-block-size: 40dvh;
+  overflow: auto;
+}

app/assets/stylesheets/utilities.css

@@ -107,6 +107,7 @@
   .pad-inline-double { padding-inline: var(--inline-space-double); }
 
   .unpad { padding: 0; }
+  .unpad-block-end { padding-block-end: 0; }
   .unpad-inline { padding-inline: 0; }
 
   /* Margins */

app/helpers/accesses_helper.rb

@@ -1,6 +1,6 @@
 module AccessesHelper
   def access_menu_tag(collection, &)
-    tag.menu class: [ "flex flex-column gap margin-none pad txt-medium", { "toggler--toggled": collection.all_access? } ], data: {
+    tag.menu class: [ "flex flex-column gap-half unpad margin-none txt-medium", { "toggler--toggled": collection.all_access? } ], data: {
       controller: "filter toggle-class",
       filter_active_class: "filter--active", filter_selected_class: "selected",
       toggle_class_toggle_class: "toggler--toggled" }, &

app/views/collections/_access_toggle.erb

@@ -11,7 +11,7 @@
 
   <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
 
-  <%= icon_tag "check", class: "toggler__visible-when-on" %>
+  <%= icon_tag "check", class: "toggler__visible-when-on margin-inline-end" %>
 
   <label class="switch toggler__visible-when-off flex-item-no-shrink">
     <%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil %>

app/views/collections/edit.html.erb

@@ -25,9 +25,9 @@
         </label>
       </div>
 
-      <section class="margin-block pad-inline fill-shade border-radius">
+      <section class="margin-block fill-shade border-radius">
         <%= access_menu_tag @collection do %>
-          <li class="flex align-center gap margin-none txt-normal">
+          <li class="flex align-center gap pad unpad-block-end txt-normal">
             <figure class="avatar flex-item-no-shrink" style="--avatar-border-radius: 0; --avatar-size: 3.5ch; margin-inline: 0.3em;">
               <%= icon_tag "everyone" %>
               <span class="for-screen-reader">Everyone</span>
@@ -46,14 +46,16 @@
             </label>
           </li>
 
-          <hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
+          <hr class="separator--horizontal margin-inline" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
 
           <% if User.active.count > 20 %>
             <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter">
           <% end %>
 
-          <div data-filter-target="list">
-            <%= access_toggles_for @selected_users, selected: true %>
+          <div data-filter-target="list" class="users-list pad-inline">
+            <% 20.times do %>
+              <%= access_toggles_for @selected_users, selected: true %>
+            <% end %>
 
             <% if @selected_users.any? && @unselected_users.any? %>
               <hr class="separator full-width" style="--border-style: solid">