From 5c7b3a8acb7be44849779ee92d168737217b88bc Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Mon, 23 Feb 2026 12:41:38 +0100
Subject: [PATCH 1/3] Keep reactions in static positioning on card perma

... and remove no longer needed styles
---
 app/assets/stylesheets/card-perma.css | 32 +++++++--------------------
 app/assets/stylesheets/comments.css   | 11 +++++++++
 app/assets/stylesheets/reactions.css  |  8 -------
 3 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 68d0cb2db..0d10762a4 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -38,20 +38,6 @@
       &:has(.card__closed) {
         padding-block-start: 2rem;
       }
-
-      &:has(.reactions .reaction) {
-        .card__meta-avatars--assignees {
-          margin-inline-end: unset;
-        }
-      }
-
-      &:not(:has(.reactions .reaction)) {
-        &:has(.card__closed) {
-          .card__meta-text--assignees {
-            margin-inline-end: calc(var(--btn-size) + var(--meta-spacer-block));
-          }
-        }
-      }
     }
 
     @media (max-width: 799px) {
@@ -186,7 +172,7 @@
         }
 
         .card__meta-avatars--assignees {
-          margin-inline: 0 calc(var(--btn-size) + var(--meta-spacer-block));
+          margin-inline: 0;
           margin-block-start: var(--meta-spacer-block);
         }
 
@@ -251,8 +237,12 @@
       }
 
       @media (max-width: 639px) {
+        display: grid;
         font-size: var(--text-x-small);
-        position: relative;
+        grid-template-columns: 1fr auto;
+        grid-template-areas:
+          "meta bg-zoom"
+          "meta reactions";
       }
     }
 
@@ -286,17 +276,11 @@
       }
 
       &:not(:has(.reaction)) {
+        margin: 0;
+
         .reactions__trigger {
           --btn-border-color: var(--color-ink-light);
         }
-
-        @media (max-width: 639px) {
-          inset-inline-end: 0;
-        }
-
-        @media (min-width: 640px) {
-          position: static;
-        }
       }
     }
 
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 01a9fbe91..2369d62b3 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -84,6 +84,17 @@
     .reactions {
       margin-block-start: var(--block-space-half);
       margin-inline: calc(var(--column-gap) / -1);
+
+      &:not(:has(.reaction)) {
+        inset-block-end: var(--comment-padding-block);
+        inset-inline-end: calc(var(--comment-padding-inline) / 2);
+        margin: 0;
+        position: absolute;
+
+        @media (max-width: 640px) {
+          inset-inline-end: calc(var(--comment-padding-inline) / 3);
+        }
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index efd487f64..14e8b2086 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -17,14 +17,6 @@
 
     &:not(:has(.reaction)) {
       inline-size: auto;
-      inset-block-end: var(--comment-padding-block);
-      inset-inline-end: calc(var(--comment-padding-inline) / 2);
-      margin: 0;
-      position: absolute;
-
-      @media (max-width: 640px) {
-        inset-inline-end: calc(var(--comment-padding-inline) / 3);
-      }
 
       .reactions__list {
         display: none;

From 73068bc2cf6b3e8dd39b9f33d3574c00c47f2756 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Mon, 23 Feb 2026 12:42:02 +0100
Subject: [PATCH 2/3] Restrict top positioning of closed stamp to perma

---
 app/assets/stylesheets/card-perma.css | 8 ++++++++
 app/assets/stylesheets/cards.css      | 6 ------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 0d10762a4..8fa21bdfb 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -218,6 +218,14 @@
       }
     }
 
+    .card__closed {
+      @media (max-width: 639px) {
+        inset: auto calc(var(--card-padding-inline) * -0.5) 100% auto;
+        translate: 0 40%;
+        scale: 75%;
+      }
+    }
+
     .card__footer {
       --btn-size: 2.5rem;
 
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 27dbb2c46..011af9089 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -409,12 +409,6 @@
         }
       }
     }
-
-    @media (max-width: 639px) {
-      inset: auto calc(var(--card-padding-inline) * -0.5) 100% auto;
-      translate: 0 40%;
-      scale: 75%;
-    }
   }
 
   .card:has(.card__closed),

From bf98b1a6d749822789c94be76dbd3795e09f3bc7 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Tue, 24 Feb 2026 12:44:13 +0100
Subject: [PATCH 3/3] Adjust closed stamp position on perma

---
 app/assets/stylesheets/card-perma.css | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 8fa21bdfb..3dc16d5a2 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -36,7 +36,11 @@
 
     @media (max-width: 639px) {
       &:has(.card__closed) {
-        padding-block-start: 2rem;
+        padding-block-start: 4.5rem;
+
+        .card-perma__bg {
+          box-shadow: 0 -2rem 0 0 var(--color-container);
+        }
       }
     }
 
@@ -96,6 +100,7 @@
       @media (max-width: 639px) {
         flex-direction: column;
         padding-block: var(--card-padding-block) calc(var(--card-padding-block) * 1.5);
+        position: static;
       }
     }
 
@@ -220,8 +225,8 @@
 
     .card__closed {
       @media (max-width: 639px) {
-        inset: auto calc(var(--card-padding-inline) * -0.5) 100% auto;
-        translate: 0 40%;
+        inset: auto 0 100% auto;
+        translate: 0 30%;
         scale: 75%;
       }
     }