Restore description field design clobbered in merge

app/assets/stylesheets/card-perma.css

@@ -100,7 +100,7 @@
       z-index: 1;
     }
 
-    .btn:not(.popup__item, .btn--plain) {
+    .btn:not(.popup__item, .btn--plain, .btn--reversed) {
       --btn-background: var(--card-color);
       --btn-color: var(--color-ink-reversed);
     }
@@ -110,6 +110,11 @@
 
       text-decoration: underline;
     }
+
+    .btn--reversed {
+      --btn-background: var(--color-bg);
+      --btn-color: var(--card-color);
+    }
   }
 
   .card-perma__closure-message {
@@ -119,29 +124,4 @@
       padding-left: 1ch;
     }
   }
-
-  /* Variants
-  /* ------------------------------------------------------------------------ */
-
-  .card-perma--pointing {
-    --arrow-size: 20em;
-    --aspect-ratio: 7;
-
-    position: relative;
-    margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio));
-
-    &::after {
-      aspect-ratio: var(--aspect-ratio);
-      background-color: var(--color-container);
-      clip-path: polygon(50% 100%, 100% 0, 0 0);
-      inline-size: var(--arrow-size);
-      content: "";
-      display: block;
-      inset-block-start: 99%;
-      inset-inline-start: 50%;
-      position: absolute;
-      transform: translateX(-50%);
-      z-index: -1;
-    }
-  }
 }

app/assets/stylesheets/cards.css

@@ -104,6 +104,16 @@
     .house-md-content {
       color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
     }
+
+    .house-md-content {
+      min-block-size: 3lh;
+      padding: var(--block-space-half) var(--inline-space) 0 0;
+    }
+
+    & ~ .btn {
+      --btn-background: var(--card-color);
+      --btn-color: var(--color-ink-reversed);
+    }
   }
 
   .card__title {

app/assets/stylesheets/comments.css

@@ -68,6 +68,7 @@
     padding:
       var(--comment-padding-block)
       var(--comment-padding-inline);
+    word-wrap: break-word;
   }
 
   .comment__edit {

app/views/cards/_container.html.erb

@@ -1,8 +1,14 @@
 <section id="<%= dom_id(card, :card_container) %>"
-    class="card-perma <%= "card-perma--pointing" unless card.published? %>" style="--card-color: <%= card.color %>;">
+    class="card-perma" style="--card-color: <%= card.color %>;">
   <%= render "cards/container/engagement", card: card %>
 
   <aside class="card-perma__actions card-perma__actions--left" role="toolbar">
+    <% if card.published? %>
+      <%= link_to edit_collection_card_path(card.collection, card), class: "btn", data: { turbo_frame: dom_id(card, :edit) } do %>
+        <%= icon_tag "pencil" %>
+        <span class="for-screen-reader">Edit</span>
+      <% end %>
+    <% end %>
     <%= render "cards/container/gild", card: card if card.doing? %>
     <%= render "cards/container/image", card: card %>
 
@@ -39,5 +45,10 @@
     </aside>
 
     <%= render "cards/container/closure", card: card %>
+  <% elsif card.creating? %>
+    <div class="card-perma__notch card-perma__notch--bottom">
+      <%= button_to "Create card", card_publish_path(card), class: "btn" %>
+      <%= button_to "Save as draft", collection_card_path(card.collection, card), name: "card[status]", value: "drafted", method: :put, class: "btn btn--reversed" %>
+    </div>
   <% end %>
 </section>

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

@@ -1,4 +1,4 @@
-<div class="card-perma__notch card-perma__notch--bottom flex-column" id="<%= dom_id(@card, :card_closure_toggle) %>" style="--card-color: <%= @card.color %>">
+<div class="card-perma__notch card-perma__notch--bottom flex-column" id="<%= dom_id(card, :card_closure_toggle) %>" style="--card-color: <%= card.color %>">
   <% if card.closed? %>
     <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>

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

@@ -1,14 +1,27 @@
-<h1 class="card__title">
-  <% if card.published? %>
-    <%= turbo_frame_tag card, :edit do %>
-      <%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link overflow-line-clamp" %>
-    <% end %>
-  <% else %>
-    <%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", data: { controller: "auto-save" } do |form| %>
+<% if card.published? %>
+  <%= turbo_frame_tag card, :edit do %>
+    <div class="full-width">
+      <h1 class="card__title flex align-start gap-half">
+        <%= link_to card.title, edit_collection_card_path(card.collection, card), class: "card__title-link" %>
+      </h1>
+      <p class="card__description margin-block-half">
+        <%= sanitize card.description_html %>
+      </p>
+    </div>
+  <% end %>
+<% else %>
+  <%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", class: "full-width", data: { controller: "auto-save" } do |form| %>
+    <h1 class="card__title">
       <%= form.text_area :title, placeholder: "Name it…",
-            class: "input input--textarea full-width borderless txt-align-start #{ "fill-highlight" if card.creating? }",
+            class: "input input--textarea full-width borderless txt-align-start",
             autofocus: card.title.blank?,
             data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
-    <% end %>
+    </h1>
+    <div class="card__description margin-block-half">
+      <%= form.markdown_area :description, class: "input input--textarea full-width borderless txt-align-start card-field__description",
+            placeholder: "Add some notes, context, pictures, or video about this…",
+            data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } %>
+    </div>
+    <%= form.button "Save changes", type: :submit, class: "btn"%>
   <% end %>
-</h1>
+<% end %>

app/views/cards/edit.html.erb

@@ -1,22 +1,19 @@
 <%= turbo_frame_tag @card, :edit do %>
   <%= form_with model: @card, url: collection_card_path(@card.collection, @card), class: "full-width", data: { controller: "form paste" } do |form| %>
-    <h1 class="card__title flex align-start gap-half">
+    <h1 class="card__title">
       <%= form.label :title, class: "flex flex-column align-center" do %>
-        <%= form.text_area :title, class: "input input--textarea full-width borderless fill-white txt-align-start card-field__title",
+        <%= form.text_area :title, class: "input input--textarea full-width borderless txt-align-start card-field__title",
               required: true, autofocus: true, placeholder: "Name it…",
               rows: 1,
               data: { action: "keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" } %>
       <% end %>
-      <%= form.button type: :submit, class: "btn txt-small margin-block-start-half" do %>
-        <%= icon_tag "check" %>
-        <span class="for-screen-reader">Save</span>
-      <% end %>
     </h1>
     <div class="card__description margin-block-half">
-      <%= form.markdown_area :description, class: "input input--textarea full-width fill-white borderless txt-align-start card-field__description",
+      <%= form.markdown_area :description, class: "input input--textarea full-width borderless txt-align-start card-field__description",
             placeholder: "Add some notes, context, pictures, or video about this…",
             data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } %>
     </div>
+    <%= form.button "Save changes", type: :submit, class: "btn"%>
     <%= link_to "Close editor and discard changes", collection_card_path(@card.collection, @card), data: { form_target: "cancel" }, hidden: true %>
   <% end %>
 <% end %>