Merge pull request #1050 from basecamp/tighten-spacing

Tighten spacing

app/assets/stylesheets/card-columns.css

@@ -5,7 +5,7 @@
   /* Card contents are resized via container queries. We're using #main here as
      the primary container so all cards have the same container reference */
   #main:has(.card-columns) {
-    --cards-gap: min(2cqi, 1rem);
+    --cards-gap: min(1cqi, 0.7rem);
     --gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink) 3%, var(--color-ink) 97%, var(--color-canvas));
     --reserved-bubble-space: 0;
     --bubble-gap: 0.5rem;
@@ -72,7 +72,7 @@
     .card {
       --block-space: 1em;
       --block-space-half: 0.5em;
-      --text-xx-large: 2em;
+      --text-xx-large: 1.6em;
       --text-x-small: 1em;
 
       /* Set lower limit for font size */
@@ -145,7 +145,9 @@
     justify-content: center;
     margin-block-start: 1px;
     margin-inline: -8px; /* enough to cover card shadows, but avoid overlapping bubbles */
-    padding-block: var(--cards-gap);
+    padding-block: var(--cards-gap) 0;
+    position: sticky;
+    z-index: 3;
 
     /* Cover bubbles and cards on small viewports */
     @media (max-width: 639px) {
@@ -274,7 +276,7 @@
     }
 
     .card__body {
-      padding-block-start: calc(var(--card-padding-block) / 2);
+      padding-block-start: 0;
       padding-inline: 0;
     }
 

app/assets/stylesheets/cards.css

@@ -121,7 +121,7 @@
     flex-grow: 1;
     gap: 1ch;
     inline-size: 100%;
-    padding-block: var(--card-padding-block);
+    padding-block: calc(var(--card-padding-block) / 2);
 
     @media (min-width: 640px) {
       gap: var(--card-padding-inline);

app/assets/stylesheets/header.css

@@ -22,7 +22,7 @@
     &:has(.header__actions > *:nth-child(3)) { --header-button-count: 3; }
 
     &:has(nav) {
-      row-gap: var(--block-space-half);
+      row-gap: 0;
     }
 
     &:has(~ #main .card-columns) {

app/views/cards/display/common/_meta.html.erb

@@ -24,7 +24,7 @@
   </span>
 
   <span class="card__meta-text card__meta-text--assignees overflow-ellipsis">
-    <%= card.assignees.any? ? "Assigned to" : "Not assigned" %>
+    <%= "Assigned to" if card.assignees.any? %>
     <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
   </span>
 

app/views/cards/display/public_preview/_meta.html.erb

@@ -20,7 +20,7 @@
   </span>
 
   <span class="card__meta-text card__meta-text--assignees overflow-ellipsis">
-    <%= card.assignees.any? ? "Assigned to" : "Not assigned" %>
+    <%= "Assigned to" if card.assignees.any? %>
     <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
   </span>