From 9224b76104dc4e9e8c5493a4b4e5b66e0ea6d31b Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 11 Aug 2025 11:43:03 -0500
Subject: [PATCH] Workflow stages look better on mobile

---
 app/assets/stylesheets/card-perma.css         | 14 ++++++++++++++
 app/assets/stylesheets/cards.css              |  9 ++++++++-
 app/views/cards/_container.html.erb           |  7 ++++---
 app/views/cards/container/_title.html.erb     | 14 ++++++--------
 app/views/cards/display/perma/_steps.html.erb |  2 +-
 5 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index b436b4d91..4b273d404 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/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 {
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index d2805cd3a..7ee937f30 100644
--- a/app/assets/stylesheets/cards.css
+++ b/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%;
   }
 
diff --git a/app/views/cards/_container.html.erb b/app/views/cards/_container.html.erb
index 42f345bee..76d78eb2a 100644
--- a/app/views/cards/_container.html.erb
+++ b/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 %>
diff --git a/app/views/cards/container/_title.html.erb b/app/views/cards/container/_title.html.erb
index 6ad7d5829..c5700dafc 100644
--- a/app/views/cards/container/_title.html.erb
+++ b/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",
diff --git a/app/views/cards/display/perma/_steps.html.erb b/app/views/cards/display/perma/_steps.html.erb
index 240bc8bab..f61b3f380 100644
--- a/app/views/cards/display/perma/_steps.html.erb
+++ b/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">