Merge pull request #957 from basecamp/new-card-bottom-notch

New card bottom notch

app/assets/stylesheets/card-perma.css

@@ -12,9 +12,9 @@
     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";
     grid-template-columns: 48px minmax(0, 1120px) 48px;
     inline-size: fit-content;
     max-inline-size: 100%;
@@ -92,11 +92,10 @@
 
       column-gap: 0;
       grid-template-areas:
-        "notch-top notch-top"
-        "card card"
-        "actions-left actions-right"
-        "notch-bottom notch-bottom";
-      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;
@@ -142,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 {
@@ -194,7 +191,11 @@
 
   .card-perma__notch--bottom {
     grid-area: notch-bottom;
-    translate: 0 -25%;
+
+    /* Translate the buttons instead of the container to allow for wrapping */
+    .btn {
+      translate: 0 -50%;
+    }
 
     &:has([open]) {
       z-index: 1;
@@ -216,13 +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);
-
-    &:first-child {
-      padding-left: 1ch;
-    }
+    translate: 0 -100%;
   }
 }

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.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 %>
-      <% end %>
-    </span>
+      </div>
+    <% end %>
   <% end %>
 </div>
+