Merge pull request #1000 from basecamp/jz/8-28-25pm

jz/8 28 25pm

app/assets/stylesheets/_global.css

@@ -63,6 +63,10 @@
     --tray-size: var(--footer-height);
   }
 
+  /* Layout */
+  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
+  --main-width: 1400px;
+
   /* Z-index */
   --z-events-column-header: 1;
   --z-events-day-header: 3;

app/assets/stylesheets/card-columns.css

@@ -12,7 +12,7 @@
     --bubble-size: 3.5rem;
 
     container-type: inline-size;
-    max-inline-size: 1400px;
+    max-inline-size: var(--main-width);
 
     @media (max-width: 639px) {
       --bubble-gap: -0.5rem;
@@ -206,7 +206,7 @@
     }
 
     .cards__decoration {
-      --size: 4em;
+      --size: 4.25em;
 
       background-color: var(--color-canvas);
       background-image: radial-gradient(ellipse at bottom,
@@ -222,7 +222,7 @@
         &:before {
           background: radial-gradient(ellipse at bottom,
             color-mix(in srgb, var(--color-considering) 30%, transparent) 0%,
-            transparent 60%);
+            transparent 70%);
           content: "";
           inset: 0;
           mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,

app/assets/stylesheets/header.css

@@ -13,7 +13,7 @@
       "menu menu menu"
       "actions-start title actions-end";
     max-inline-size: 100dvw;
-    padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--inline-space);
+    padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--main-padding);
     view-transition-name: header;
 
     /* Change the grid size depending on how many buttons are present */
@@ -25,6 +25,12 @@
       row-gap: var(--block-space-half);
     }
 
+    &:has(~ #main .card-columns) {
+      inline-size: 100dvw;
+      margin-inline: auto;
+      max-inline-size: var(--main-width);
+    }
+
     nav {
       grid-area: menu;
       margin-inline: auto;

app/assets/stylesheets/layout.css

@@ -9,8 +9,6 @@
   }
 
   :where(#main) {
-    --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
-
     inline-size: 100dvw;
     margin-inline: auto;
     max-inline-size: 100dvw;

app/assets/stylesheets/popup.css

@@ -32,7 +32,6 @@
     }
 
     #header:has(&) {
-      max-inline-size: 100vw;
       position: relative;
       z-index: 5;
     }

app/views/cards/index.html.erb

@@ -40,11 +40,13 @@
         dragover->drag-and-drop#dragOver
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>
-  <div class="card-columns" data-controller="related-element" data-related-element-highlight-class="cards--related">
-    <%= render "cards/index/engagement/on_deck", **@on_deck.to_h %>
-    <%= render "cards/index/engagement/considering", **@considering.to_h %>
-    <%= render "cards/index/engagement/doing", **@doing.to_h %>
-  </div>
+  <% unless @filter.closers.any? %>
+    <div class="card-columns" data-controller="related-element" data-related-element-highlight-class="cards--related">
+      <%= render "cards/index/engagement/on_deck", **@on_deck.to_h %>
+      <%= render "cards/index/engagement/considering", **@considering.to_h %>
+      <%= render "cards/index/engagement/doing", **@doing.to_h %>
+    </div>
+  <% end %>
 
   <%= render "cards/index/engagement/closed", **@closed.to_h %>
 <% end %>

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

@@ -1,4 +1,4 @@
-<% if collection = user_filtering.collections.first %>
+<% if @filter.collection_ids.one? && collection = user_filtering.collections.first %>
   <div class="card card--new">
     <%= button_to collection_cards_path(collection), method: :post, class: "btn" do %>
       <%= icon_tag "add" %>

app/views/cards/index/engagement/_closed.html.erb

@@ -10,6 +10,6 @@
       </div>
     <% end %>
   <% else %>
-    <p class="txt-medium translucent">Nothing here</p>
+    <p class="txt-normal translucent"><%= @user_filtering.any? ? "No matches" : "Nothing here" %></p>
   <% end %>
 </section>

app/views/cards/index/engagement/_doing.html.erb

@@ -20,5 +20,7 @@
           <%= cards_next_page_link "doing-cards", page: page, filter: filter %>
         </div>
       <% end %>
+    <% else %>
+      <p class="txt-normal translucent"><%= @user_filtering.any? ? "No matches" : "Nothing here" %></p>
     <% end %>
 </section>

app/views/cards/index/engagement/_on_deck.html.erb

@@ -14,5 +14,7 @@
         <%= cards_next_page_link "on-deck-cards", page: page, filter: filter %>
       </div>
     <% end %>
+  <% else %>
+    <p class="txt-normal translucent"><%= @user_filtering.any? ? "No matches" : "Nothing here" %></p>
   <% end %>
 </section>

app/views/collections/edit.html.erb

@@ -1,7 +1,16 @@
-<% @page_title = "Collection Settings" %>
+<% @page_title = "Settings" %>
 
 <% content_for :header do %>
   <%= render "filters/menu", user_filtering: @user_filtering %>
+  <div class="header__actions header__actions--start">
+    <%= link_to cards_path(collection_ids: [ @collection ]), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis">
+        &larr;
+        <strong><%= @collection.name %></strong>
+      </span>
+    <% end %>
+  </div>
+
   <h1 class="header__title"><%= @page_title %></h1>
 <% end %>