From 95a2c1646a2e7cea6511c7f60fbf5d163b4482e7 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 20 Aug 2025 15:54:53 -0500
Subject: [PATCH 1/3] Align bottom notch when no closure message exists

---
 app/assets/stylesheets/card-perma.css       | 16 ++++++++--------
 app/views/cards/container/_closure.html.erb | 20 ++++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 21a45d36b..d19d743bf 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -12,9 +12,10 @@
     column-gap: var(--inline-space);
     display: grid;
     grid-template-areas:
-      "qw notch-top we"
+      "notch-top notch-top notch-top"
       "actions-left card actions-right"
-      "er notch-bottom rt";
+      "notch-bottom notch-bottom notch-bottom"
+      "closure-message closure-message closure-message";
     grid-template-columns: 48px minmax(0, 1120px) 48px;
     inline-size: fit-content;
     max-inline-size: 100%;
@@ -95,7 +96,8 @@
         "notch-top notch-top"
         "card card"
         "actions-left actions-right"
-        "notch-bottom notch-bottom";
+        "notch-bottom notch-bottom"
+        "closure-message closure-message";
       grid-template-columns: 1fr 1fr;
       inline-size: calc(100% + 2 * var(--padding-inline));
       margin-inline: calc(-1 * var(--padding-inline));
@@ -194,7 +196,7 @@
 
   .card-perma__notch--bottom {
     grid-area: notch-bottom;
-    translate: 0 -25%;
+    translate: 0 -50%;
 
     &:has([open]) {
       z-index: 1;
@@ -220,9 +222,7 @@
 
   .card-perma__closure-message {
     color: var(--card-color);
-
-    &:first-child {
-      padding-left: 1ch;
-    }
+    grid-area: closure-message;
+    translate: 0 -50%;
   }
 }
diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb
index 7d5914a9a..48683770b 100644
--- a/app/views/cards/container/_closure.html.erb
+++ b/app/views/cards/container/_closure.html.erb
@@ -20,15 +20,15 @@
         <% end %>
       </div>
     </details>
-
-    <span class="card-perma__closure-message">
-      <% if card.entropic? %>
-        <% if card.doing? %>
-          Falls back to <em>Considering</em> if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
-        <% else %>
-          Auto-closes if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
-        <% end %>
-      <% end %>
-    </span>
+  <% end %>
+</div>
+
+<div class="card-perma__closure-message">
+  <% if card.entropic? %>
+    <% if card.doing? %>
+      Falls back to <em>Considering</em> if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
+    <% else %>
+      Auto-closes if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
+    <% end %>
   <% end %>
 </div>

From 4a12a91d63156a67fe88759494bbf6b206f24c71 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 20 Aug 2025 15:56:12 -0500
Subject: [PATCH 2/3] Reintroduce logic

---
 app/views/cards/container/_closure.html.erb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb
index 48683770b..0efe94ea4 100644
--- a/app/views/cards/container/_closure.html.erb
+++ b/app/views/cards/container/_closure.html.erb
@@ -23,12 +23,12 @@
   <% end %>
 </div>
 
-<div class="card-perma__closure-message">
-  <% if card.entropic? %>
+<% if card.entropic? && !card.closed? %>
+  <div class="card-perma__closure-message">
     <% if card.doing? %>
       Falls back to <em>Considering</em> if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
     <% else %>
       Auto-closes if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
     <% end %>
-  <% end %>
-</div>
+  </div>
+<% end %>

From cad791c8ee16f2c20b0e6f47525351af6a6d8eeb Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 20 Aug 2025 16:08:04 -0500
Subject: [PATCH 3/3] Stack bottom notch buttons on small screens

---
 app/assets/stylesheets/card-perma.css       | 30 +++++++++++----------
 app/views/cards/container/_closure.html.erb | 18 ++++++-------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index d19d743bf..2f919a1a2 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -14,8 +14,7 @@
     grid-template-areas:
       "notch-top notch-top notch-top"
       "actions-left card actions-right"
-      "notch-bottom notch-bottom notch-bottom"
-      "closure-message closure-message closure-message";
+      "notch-bottom notch-bottom notch-bottom";
     grid-template-columns: 48px minmax(0, 1120px) 48px;
     inline-size: fit-content;
     max-inline-size: 100%;
@@ -93,12 +92,10 @@
 
       column-gap: 0;
       grid-template-areas:
-        "notch-top notch-top"
-        "card card"
-        "actions-left actions-right"
-        "notch-bottom notch-bottom"
-        "closure-message closure-message";
-      grid-template-columns: 1fr 1fr;
+        "notch-top notch-top notch-top"
+        "card card card"
+        "actions-left notch-bottom actions-right";
+      grid-template-columns: 1fr auto 1fr;
       inline-size: calc(100% + 2 * var(--padding-inline));
       margin-inline: calc(-1 * var(--padding-inline));
       max-inline-size: none;
@@ -144,10 +141,8 @@
   @media (max-width: 800px) {
     .card-perma__actions {
       display: flex;
-      inset-block-end: 0;
       padding-inline: var(--padding-inline);
-      position: absolute;
-      translate: 0 50%;
+      translate: 0 -50%;
     }
 
     .card-perma__actions--right {
@@ -196,7 +191,11 @@
 
   .card-perma__notch--bottom {
     grid-area: notch-bottom;
-    translate: 0 -50%;
+
+    /* Translate the buttons instead of the container to allow for wrapping */
+    .btn {
+      translate: 0 -50%;
+    }
 
     &:has([open]) {
       z-index: 1;
@@ -218,11 +217,14 @@
       --btn-color: var(--card-color);
       --btn-border-color: var(--color-container);
     }
+
+    @media (max-width: 639px) {
+      flex-direction: column;
+    }
   }
 
   .card-perma__closure-message {
     color: var(--card-color);
-    grid-area: closure-message;
-    translate: 0 -50%;
+    translate: 0 -100%;
   }
 }
diff --git a/app/views/cards/container/_closure.html.erb b/app/views/cards/container/_closure.html.erb
index 0efe94ea4..8c07e2c64 100644
--- a/app/views/cards/container/_closure.html.erb
+++ b/app/views/cards/container/_closure.html.erb
@@ -20,15 +20,15 @@
         <% end %>
       </div>
     </details>
+    <% if card.entropic? %>
+      <div class="card-perma__closure-message">
+        <% if card.doing? %>
+          Falls back to <em>Considering</em> if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
+        <% else %>
+          Auto-closes if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
+        <% end %>
+      </div>
+    <% end %>
   <% end %>
 </div>
 
-<% if card.entropic? && !card.closed? %>
-  <div class="card-perma__closure-message">
-    <% if card.doing? %>
-      Falls back to <em>Considering</em> if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
-    <% else %>
-      Auto-closes if no activity <%= local_datetime_tag(card.entropy.auto_clean_at, style: :indays) -%>.
-    <% end %>
-  </div>
-<% end %>