Merge pull request #2521 from basecamp/mobile/tweak-card-draft-ui

app/assets/stylesheets/card-perma.css

@@ -68,7 +68,7 @@
 
       @media (max-width: 639px) {
         flex-direction: column;
-        padding-block-end: calc(var(--card-padding-block) * 1.5);
+        padding-block: var(--card-padding-block) calc(var(--card-padding-block) * 1.5);
       }
     }
 
@@ -90,12 +90,24 @@
       }
 
       &:has(textarea) {
-        margin-block-end: 0;
+        @media (min-width: 640px) {
+          margin-block-end: 0;
+        }
 
         @supports not (field-sizing: content) {
           text-wrap: unset; /* Safari is annoying if you have text-wrap: balance in textareas */
         }
       }
+
+      @media (max-width: 639px) {
+        margin-block-end: 0.75ch;
+      }
+    }
+
+    .card__description {
+      @media (max-width: 639px) {
+        margin-block-end: 1ch;
+      }
     }
 
     .card__meta,

app/assets/stylesheets/native.css

@@ -66,6 +66,12 @@
       translate: unset;
     }
 
+    .card-perma--draft {
+      .card-perma__bg {
+        box-shadow: 0 calc(100vh + 100px) 0 100vh var(--color-container);
+      }
+    }
+
     /* Search
     /* ------------------------------------------------------------------------ */
 

app/views/cards/drafts/_container.html.erb

@@ -1,4 +1,4 @@
-<section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color %>;">
+<section id="<%= dom_id(card, :card_container) %>" class="card-perma card-perma--draft" style="--card-color: <%= card.color %>;">
   <% cache card do %>
     <div class="card-perma__actions card-perma__actions--left">
       <%= render "cards/container/image", card: card %>