Merge pull request #2584 from basecamp/settings-overflow-fix

Make generic scrollable list class for settings

app/assets/stylesheets/print.css

@@ -232,8 +232,7 @@
   /* Settings
   /* ------------------------------------------------------------------------ */
 
-  .settings__user-filter .input,
-  .settings__user-list-tips {
+  .settings__user-filter .input {
     display: none;
   }
 

app/assets/stylesheets/settings.css

@@ -55,10 +55,7 @@
     }
   }
 
-  /* Users
-  /* ------------------------------------------------------------------------ */
-
-  .settings__section--users {
+  .settings__section:has(.settings__scrollable-list) {
     @media (min-width: 640px) {
       display: flex;
       flex: 1;
@@ -66,24 +63,8 @@
       min-height: 0;
     }
   }
-  .settings__user-filter {
-    --btn-size: 3.5ch;
-    --avatar-size: var(--btn-size);
 
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--settings-spacer) / 2);
-    min-height: 0;
-  }
-
-  .settings__user-filter--bg {
-    background-color: var(--color-ink-lightest);
-    border-radius: 0.5em;
-    margin-block: 0;
-    padding: var(--settings-spacer);
-  }
-
-  .settings__user-list {
+  .settings__scrollable-list {
     flex: 1 1 auto;
     list-style: none;
     margin: calc(var(--settings-spacer) / -4) calc(-1 * var(--settings-item-padding-inline));
@@ -116,15 +97,23 @@
     }
   }
 
-  .settings__user-list-tips {
-    border-top: 1px solid var(--color-ink-light);
-    color: var(--color-ink-dark);
-    font-size: var(--text-small);
-    padding-block-start: var(--settings-spacer);
+  /* Users
+  /* ------------------------------------------------------------------------ */
 
-    .settings__user-filter--bg & {
-      margin-inline: calc(-1 * var(--settings-spacer));
-      padding-inline: var(--settings-spacer);
-    }
+  .settings__user-filter {
+    --btn-size: 3.5ch;
+    --avatar-size: var(--btn-size);
+
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--settings-spacer) / 2);
+    min-height: 0;
+  }
+
+  .settings__user-filter--bg {
+    background-color: var(--color-ink-lightest);
+    border-radius: 0.5em;
+    margin-block: 0;
+    padding: var(--settings-spacer);
   }
 }

app/views/account/settings/_users.html.erb

@@ -1,4 +1,4 @@
-<section class="settings__section settings__section--users">
+<section class="settings__section">
   <header>
     <h2 class="divider">People on this account</h2>
   </header>
@@ -13,7 +13,7 @@
     <div class="settings__user-filter">
       <input placeholder="Filter…" class="input input--transparent full-width txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
 
-      <ul class="settings__user-list margin-block-half" data-filter-target="list" role="listbox">
+      <ul class="settings__scrollable-list margin-block-half" data-filter-target="list" role="listbox">
         <%= render partial: "account/settings/user", collection: users %>
       </ul>
     </div>

app/views/boards/edit/_users.html.erb

@@ -33,7 +33,7 @@
     </div>
   </div>
 
-  <ul class="settings__user-list" data-filter-target="list">
+  <ul class="settings__scrollable-list" data-filter-target="list">
     <%= access_toggles_for selected_users, selected: true, disabled: %>
     <%= access_toggles_for unselected_users, selected: false, disabled: %>
   </ul>

app/views/notifications/settings/show.html.erb

@@ -8,7 +8,7 @@
   <div class="settings__panel settings__panel--users panel shadow">
     <section class="settings__section">
       <h2 class="divider">Boards</h2>
-      <div class="settings__user-list flex flex-column gap-half">
+      <div class="settings__scrollable-list flex flex-column gap-half">
         <%= render partial: "notifications/settings/board", collection: @boards, locals: { user: Current.user } %>
       </div>
     </section>