Workflow stages look better on mobile

app/assets/stylesheets/card-perma.css

@@ -54,6 +54,20 @@
 
     .card__stages {
       max-inline-size: 32ch;
+
+      @media (max-width: 639px) {
+        border: 1px solid var(--card-color);
+        border-radius: 0.25em;
+        overflow: hidden;
+        max-inline-size: 100%;
+        padding: 0;
+      }
+    }
+
+    .workflow-stage {
+      @media (max-width: 639px) {
+        --btn-border-radius: 0;
+      }
     }
 
     .collection-picker__button {

app/assets/stylesheets/cards.css

@@ -51,9 +51,13 @@
   .card__body {
     display: flex;
     flex-grow: 1;
-    gap: var(--card-padding-inline);
+    gap: 1ch;
     inline-size: 100%;
     padding-block: var(--card-padding-block);
+
+    @media (min-width: 640px) {
+      gap: var(--card-padding-inline);
+    }
   }
 
   .card__collection {
@@ -101,7 +105,10 @@
 
   .card__content {
     contain: inline-size;
+    display: flex;
     flex: 2 1 auto;
+    flex-direction: column;
+    gap: 1ch;
     max-inline-size: 100%;
   }
 

app/views/cards/_container.html.erb

@@ -15,12 +15,13 @@
       </header>
 
       <div class="card__body justify-space-between">
-        <%= render "cards/container/title", card: card %>
+        <div class="card__content">
+          <%= render "cards/container/title", card: card %>
+          <%= render "cards/display/perma/steps", card: card %>
+        </div>
         <%= render "cards/stagings/stages", card: card if card.doing? %>
       </div>
 
-      <%= render "cards/display/perma/steps", card: card %>
-
       <footer class="card__footer full-width flex align-start gap">
         <%= render "cards/display/perma/meta", card: card %>
         <%= render "cards/display/perma/background", card: card %>

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

@@ -1,16 +1,14 @@
 <% if card.published? && !params[:focus_on_title]%>
   <%= turbo_frame_tag card, :edit do %>
-    <div class="card__content">
-      <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>
-      <div class="card__description rich-text-content margin-block-half rich-text-content" data-controller="syntax-highlight retarget-links">
-        <%= card.description %>
-      </div>
+    <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>
+    <div class="card__description rich-text-content margin-block-half rich-text-content" data-controller="syntax-highlight retarget-links">
+      <%= card.description %>
     </div>
   <% end %>
 <% else %>
-  <%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", class: "card__content", data: { controller: "autoresize auto-save" } do |form| %>
+  <%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", class: "display-contents", data: { controller: "autoresize auto-save" } do |form| %>
     <h1 class="card__title autoresize__wrapper" data-autoresize-target="wrapper" data-autoresize-clone-value="">
       <%= form.text_area :title, placeholder: "Name it…",
             class: "input input--textarea full-width borderless txt-align-start autoresize__textarea hide-focus-ring",

app/views/cards/display/perma/_steps.html.erb

@@ -1,4 +1,4 @@
-<ol class="steps txt-small margin-block">
+<ol class="steps txt-small margin-block-start-auto">
   <%= render partial: "cards/steps/step", collection: card.steps, as: :step %>
 
   <div class="step">