From 1d0939b847a0a33b0c30b5109b7f1f42e349e1cc Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 19 Aug 2025 17:03:42 -0500
Subject: [PATCH] Use grid areas so it's easier to tell what's going on

---
 app/assets/stylesheets/cards.css | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 17a6f8c9f..58ec94ed0 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -218,27 +218,35 @@
 
   .card__meta-avatars {
     align-self: center;
-    grid-row: 1 / span 3;
+    /* grid-row: 1 / span 3; */
   }
 
   .card__meta-avatars--assignees {
     display: flex;
-    grid-column: 4;
+    /* grid-column: 4; */
 
     .avatar {
       margin-inline-end: calc(-1 * var(--meta-spacer-inline));
     }
   }
 
+  /* Assign grid areas */
+  .card__meta-avatars--author { grid-area: avatars-author; }
+  .card__meta-avatars--assignees { grid-area: avatars-assignees; }
+  .card__meta-text--added { grid-area: text-added; }
+  .card__meta-text--author { grid-area: text-author; }
+  .card__meta-text--updated { grid-area: text-updated; }
+  .card__meta-text--assignees { grid-area: text-assignees; }
+
   /* Small screens */
   @media (max-width: 639px) {
     .card__meta {
       column-gap: var(--meta-spacer-inline);
-      grid-template-columns: repeat(3, auto);
-      grid-areas:
+      grid-template-areas:
         "text-added text-author avatars-assignees"
         "text-updated text-updated avatars-assignees"
         "text-assignees text-assignees avatars-assignees";
+      grid-template-columns: auto 1fr auto;
     }
 
     .card__meta-avatars--author,
@@ -254,21 +262,19 @@
     .card__meta-text--updated,
     .card__meta-text--assignees {
       border-block-start: var(--meta-border);
-      grid-column: 1 / 4;
     }
   }
 
   /* Large screens */
   @media (min-width: 640px) {
-    .meta {
-      grid-template-columns: repeat(4, auto);
-      grid-areas:
+    .card__meta {
+      grid-template-areas:
         "avatars-author text-added text-updated avatars-assignees"
         "avatars-author text-author text-assignees avatars-assignees";
+      grid-template-columns: repeat(4, auto);
     }
 
     .card__meta-avatars--author {
-      grid-column: 1;
       margin-inline-end: var(--meta-spacer-inline);
     }
 
@@ -279,26 +285,22 @@
     /* Top */
     .card__meta-text:nth-of-type(odd) {
       border-block-end: var(--meta-border);
-      grid-row: 1;
       padding-block-end: var(--meta-spacer-block);
     }
 
     /* Bottom */
     .card__meta-text:nth-of-type(even) {
-      grid-row: 2;
       padding-block-start: var(--meta-spacer-block);
     }
 
     /* Left */
     .card__meta-text:nth-of-type(-n+2) {
       border-inline-end: var(--meta-border);
-      grid-column: 2;
       padding-inline-end: var(--meta-spacer-inline);
     }
 
     /* Right */
     .card__meta-text:nth-of-type(n+3) {
-      grid-column: 3;
       padding-inline-start: var(--meta-spacer-inline);
     }