From c9d5a78ac4e5a10f1b69762e3c8aa2ffd3a8fc15 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 2 May 2025 15:47:14 +0200
Subject: [PATCH] Avoid truncating workflow name, adjust alignment and sizing

---
 app/assets/stylesheets/workflows.css           | 5 +++--
 app/views/collections/edit/_workflows.html.erb | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index 150c6cffc..0cda31190 100644
--- a/app/assets/stylesheets/workflows.css
+++ b/app/assets/stylesheets/workflows.css
@@ -29,11 +29,11 @@
   }
 
   .workflow-preview {
-    --border-size: 3px;
+    --border-size: 0.2em;
 
     aspect-ratio: 1;
     flex: 1 1 30%;
-    max-inline-size: 33%;
+    max-inline-size: 30%;
 
     button {
       --hover-size: 0;
@@ -51,6 +51,7 @@
       margin: 0;
       max-inline-size: 100%;
       outline: 0;
+      overflow: hidden;
       padding: 1em;
       text-align: start;
     }
diff --git a/app/views/collections/edit/_workflows.html.erb b/app/views/collections/edit/_workflows.html.erb
index 092b6195f..1b6154415 100644
--- a/app/views/collections/edit/_workflows.html.erb
+++ b/app/views/collections/edit/_workflows.html.erb
@@ -1,11 +1,11 @@
 <strong class="txt-large">Workflows</strong>
 <div class="flex justify-center margin-block-end">Use a Workflow to track progress in this Collection.</div>
-<div class="flex flex-wrap gap">
+<div class="flex flex-wrap gap justify-center">
   <% Workflow.all.each do |workflow| %>
     <div class="workflow-preview txt-align-start border border-radius <%= 'workflow-preview--selected' if workflow == collection.workflow %>">
       <%= button_to collection_workflow_path(collection), method: :patch do %>
         <%= hidden_field_tag "collection[workflow_id]", workflow.id %>
-        <strong class="txt-small overflow-ellipsis"><%= workflow.name %></strong>
+        <strong class="txt-small overflow-ellipsis flex-item-no-shrink"><%= workflow.name %></strong>
         <ul class="list-style-none txt-xx-small margin-none flex flex-column gap-half">
           <% workflow.stages.each do |stage| %>
             <li class="overflow-ellipsis flex align-center gap-half min-width">