Tweak card footer on perma

... to fix in the native apps

app/assets/stylesheets/card-perma.css

@@ -292,10 +292,7 @@
 
     /* Overlap the card BG by half the button height */
     &:has(.btn) {
-      &,
-      ~ .card-perma__closure-message {
-        translate: 0 calc(-1 * var(--half-btn-height));
-      }
+      translate: 0 -50%;
     }
 
     form {
@@ -341,7 +338,19 @@
   .card-perma__closure-message {
     color: var(--card-color);
     grid-area: closure-message;
-    margin-block-start: 0.5ch;
+    margin-block: var(--block-space) var(--block-space-double);
     padding-inline: 1ch;
+
+    @media (max-width: 799px) {
+      margin-block: var(--block-space-half);
+      translate: 0 calc(-0.5 * var(--half-btn-height));
+    }
+
+    @media (min-width: 800px) {
+      .card-perma__notch--bottom:has(.btn) ~ & {
+        margin-block: var(--block-space-half) var(--block-space);
+        translate: 0 calc(-0.5 * var(--half-btn-height));
+      }
+    }
   }
 }

app/assets/stylesheets/native.css

@@ -35,6 +35,15 @@
       margin-block-start: 0;
     }
 
+    .card-perma__bg {
+      padding-block: clamp(0.25rem, 2vw, var(--padding-block));
+    }
+
+    .card-perma__closure-message {
+      margin-block: var(--block-space);
+      translate: unset;
+    }
+
     /* Search
     /* ------------------------------------------------------------------------ */
 

app/views/cards/container/_closure.html.erb

@@ -1,15 +1,13 @@
 <div class="display-contents" id="<%= dom_id(card, :card_closure_toggle) %>">
   <% if card.closed? %>
-    <div class="card-perma__notch card-perma__notch--bottom flex-column">
-      <div class="flex gap-half margin-block-start-double margin-block-end">
-        <span class="card-perma__closure-message">Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
-        <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
-          <span class="pad-inline-end">Undo</span>
-        <% end %>
-      </div>
+    <div class="card-perma__closure-message flex gap-half justify-center">
+      <span>Completed by <%= card.closed_by.name %> on <%= local_datetime_tag(card.closed_at, style: :shortdate) %>.</span>
+      <%= button_to card_closure_path(card), method: :delete, class: "btn btn--plain borderless fill-transparent" do %>
+        <span class="pad-inline-end">Undo</span>
+      <% end %>
     </div>
   <% else %>
-    <div class="card-perma__notch card-perma__notch--bottom flex-column">
+    <div class="card-perma__notch card-perma__notch--bottom">
       <%= render "cards/container/closure_buttons", card: card %>
     </div>
     <% if card.entropic? && card.open? && !card.postponed? %>