From 69e185b3c27d246b8ebb865ed3b5ca2dc1c79fa1 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Wed, 11 Feb 2026 17:24:25 +0100
Subject: [PATCH] Change layout of meta data to avoid early truncation

---
 app/assets/stylesheets/card-perma.css | 68 ++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index b3d37d68a..735480182 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -108,6 +108,63 @@
     .card__meta {
       grid-area: meta;
       margin-inline-end: auto;
+
+      @media (max-width: 639px) {
+        --meta-spacer-block: 0.75ch;
+
+        inline-size: 100%;
+        grid-template-areas:
+          "avatars-author text-added"
+          "avatars-author text-author"
+          "text-updated text-updated"
+          "text-assignees text-assignees"
+          "avatars-assignees avatars-assignees";
+        grid-template-columns: auto 1fr;
+
+        &:has(.card__meta-avatars--assignees .avatar) {
+          &:not(:has(.reaction)) {
+            .card__meta-avatars--assignees {
+              margin-inline-end: calc(var(--btn-size) + var(--meta-spacer-block));
+            }
+          }
+        }
+
+        &:not(:has(.card__meta-avatars--assignees .avatar)) {
+          grid-template-areas:
+            "avatars-author text-added"
+            "avatars-author text-author"
+            "... text-updated"
+            "avatars-assignees text-assignees";
+
+          .card__meta-text--assignees {
+            margin-inline-end: calc(var(--btn-size) + var(--meta-spacer-block));
+          }
+        }
+
+        .card__meta-text {
+          border: 0;
+          padding: 0;
+        }
+
+        .card__meta-text + .card__meta-text {
+          border-block-start: var(--card-border);
+          margin-block-start: var(--meta-spacer-block);
+          padding-block-start: var(--meta-spacer-block);
+        }
+
+        .card__meta-avatars--assignees {
+          margin-inline-start: unset;
+          margin-block-start: calc(var(--meta-spacer-block) * 2);
+        }
+
+        .card__meta-avatars--author {
+          display: initial;
+        }
+
+        .card__meta-avatars--assignees .avatar {
+          display: grid;
+        }
+      }
     }
 
     .card__stages {
@@ -163,6 +220,7 @@
 
       @media (max-width: 639px) {
         font-size: var(--text-x-small);
+        position: relative;
       }
     }
 
@@ -192,11 +250,17 @@
       }
 
       &:not(:has(.reaction)) {
-        position: static;
-
         .reactions__trigger {
           --btn-border-color: var(--color-ink-light);
         }
+
+        @media (max-width: 639px) {
+          inset-inline-end: 0;
+        }
+
+        @media (min-width: 640px) {
+          position: static;
+        }
       }
     }