Render stage inline so it doesn't overlap collection name

Allows truncation of collection name to fit stage name

app/assets/stylesheets/cards.css

@@ -121,6 +121,10 @@
     max-inline-size: 100%;
     min-inline-size: 0;
     overflow: hidden;
+
+    .workflow-stage {
+      display: none;
+    }
   }
 
   .card__id {

app/assets/stylesheets/trays.css

@@ -51,7 +51,6 @@
         0 0 0 1px var(--color-ink-lighter),
         0 0 16px oklch(var(--lch-black) / 33%);
       inset-block-end: var(--footer-height);
-      overflow: hidden;
     }
 
     &:not([open]) {
@@ -312,7 +311,7 @@
     .card__tags,
     .card__meta .btn,
     .card__meta-item:not(.card__meta-item--updated),
-    .workflow-stage:not(.workflow-stage--current),
+    .card__stages,
     .card__closed {
       display: none;
     }
@@ -321,6 +320,12 @@
       display: block;
     }
 
+    .card__header {
+      margin-block-start: calc(var(--card-padding-block) * -1.1);
+      margin-inline: calc(-1 * var(--card-padding-inline));
+      max-inline-size: unset;
+    }
+
     .card__meta-grid {
       margin-inline-start: 0;
     }
@@ -329,10 +334,6 @@
       z-index: 1;
     }
 
-    .card__stages {
-      padding: 0;
-    }
-
     .card__meta-item--updated {
       border: 0;
       font-size: var(--text-x-small);
@@ -346,12 +347,15 @@
     }
 
     .workflow-stage--current {
-      background: none;
+      --btn-padding: 0.1em 0.5em;
+
+      background: none !important;
       border: 1px solid currentColor;
       color: var(--color-ink);
+      display: inline-flex;
+      flex: 0 1 auto;
       inline-size: fit-content;
-      inset: 0 0 auto auto;
-      position: absolute;
+      margin: 0 0 0 auto;
     }
 
     .card__bubble {

app/views/cards/display/_preview.html.erb

@@ -6,6 +6,12 @@
       <header class="card__header">
         <%= render "cards/display/preview/collection", card: card %>
         <%= render "cards/display/preview/tags", card: card %>
+
+        <% if workflow = card.collection.workflow %>
+          <span class="btn justify-start workflow-stage workflow-stage--current txt-uppercase min-width max-width">
+            <span class="overflow-ellipsis "><%= card.stage.name %></span>
+          </span>
+        <% end %>
       </header>
 
       <div class="card__body justify-space-between">