Merge branch 'JZ/10/6/2025'

app/assets/stylesheets/bar.css

@@ -10,7 +10,7 @@
     font-size: 0.9em;
     inset: auto 0 0 0;
     max-block-size: 100%;
-    padding: 0 calc(var(--tray-size) + calc(var(--inline-space) * 3)) env(safe-area-inset-bottom);
+    padding: var(--block-space) calc(var(--tray-size) + calc(var(--inline-space) * 3)) calc(var(--block-space) + env(safe-area-inset-bottom));
     place-content: center;
     position: fixed;
     z-index: var(--z-terminal);

app/assets/stylesheets/card-columns.css

@@ -461,7 +461,7 @@
         inset: calc(var(--column-width-collapsed) + var(--block-space-half)) 0 0 0;
         mask: var(--wavy-background-mask);
         position: absolute;
-        z-index: 0;
+        z-index: -1;
       }
     }
 

app/assets/stylesheets/filters.css

@@ -108,8 +108,8 @@
     --input-border-radius: 5em;
     --input-padding: 0.5em 2.3em 0.5em 1.3em;
 
-    inline-size: 22ch;
-    min-inline-size: 22ch;
+    inline-size: 25ch;
+    min-inline-size: 25ch;
 
     .filters:not(.filters--expanded, .filters--has-filters-set) & {
       margin-inline-end: calc((var(--btn-size) + var(--inline-space-half) + 0.25em) * -1);

app/assets/stylesheets/search.css

@@ -69,6 +69,7 @@ summary {
     inset: 0 0 auto 0;
     justify-content: flex-end;
     padding: var(--block-space-half) var(--block-space);
+    pointer-events: none;
     position: absolute;
   }
 

app/assets/stylesheets/settings.css

@@ -19,7 +19,7 @@
 
     display: flex;
     flex-direction: column;
-    gap: var(--settings-spacer);
+    gap: calc(var(--settings-spacer) / 2);
     min-block-size: 100%;
     min-inline-size: 0;
 
@@ -45,7 +45,7 @@
 
     display: flex;
     flex-direction: column;
-    gap: var(--settings-spacer);
+    gap: calc(var(--settings-spacer) / 4);
     min-height: 0;
   }
 

app/assets/stylesheets/trays.css

@@ -383,11 +383,13 @@
       background-color: var(--card-bg-color);
       inset: 0 0 auto auto;
       opacity: 0;
+      pointer-events: none;
       position: absolute;
       z-index: 1;
 
       .tray__dialog[open] & {
         opacity: 0.66;
+        pointer-events: unset;
 
         &:hover {
           opacity: 1;

app/helpers/pagination_helper.rb

@@ -5,7 +5,7 @@ module PaginationHelper
 
   def link_to_next_page(namespace, page, activate_when_observed: false, label: "Load more...", data: {}, **attributes)
     if page.before_last? && !params[:previous]
-      pagination_link(namespace, page.number + 1, label: label, activate_when_observed: activate_when_observed, data: data, class: "margin-block btn txt-small center", **attributes)
+      pagination_link(namespace, page.number + 1, label: label, activate_when_observed: activate_when_observed, data: data, class: "btn txt-small center-block center", **attributes)
     end
   end
 

app/views/account/_user.html.erb

@@ -1,7 +1,10 @@
 <li class="flex align-center gap-half" data-filter-target="item" data-navigable-list-target="item">
   <%= link_to user, class: "txt-ink flex gap-half align-center min-width" do %>
     <%= avatar_preview_tag user, hidden_for_screen_reader: true %>
-    <strong class="overflow-ellipsis"><%= user.name %></strong>
+    <div class="txt-align-start overflow-ellipsis">
+      <strong><%= user.name %></strong>
+      <div class="txt-x-small"><%= user.email_address %></div>
+    </div>
   <% end %>
 
   <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">

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

@@ -8,14 +8,10 @@
   <%#= render "account/invite" # Scheduled work in https://3.basecamp.com/2914079/buckets/37331921/todos/8746162337 %>
 
   <div class="settings__user-filter">
-    <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#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" data-filter-target="list">
+    <ul class="settings__user-list margin-block-half" data-filter-target="list">
       <%= render partial: "account/user", collection: users %>
     </ul>
-
-    <footer class="settings__user-list-tips">
-      Press <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to visit profile, <kbd class="kbd">SHIFT+ENTER</kbd> to toggle.
-    </footer>
   </div>
 <% end %>

app/views/collections/_access_toggle.erb

@@ -1,7 +1,10 @@
 <li class="flex align-center gap-half" data-filter-target="item" data-navigable-list-target="item">
   <%= link_to user, class: "txt-ink flex gap-half align-center min-width" do %>
     <%= avatar_preview_tag user, hidden_for_screen_reader: true %>
-    <strong class="overflow-ellipsis"><%= user.name %></strong>
+    <div class="txt-align-start overflow-ellipsis">
+      <strong><%= user.name %></strong>
+      <div class="txt-x-small"><%= user.email_address %></div>
+    </div>
   <% end %>
 
   <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">

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

@@ -18,7 +18,7 @@
     </label>
   </li>
 
-  <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#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">
 
   <div class="toggler__visible-when-off">
     <div class="flex align-center justify-end gap-half">