diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index e3cd890fc..18e513886 100644
--- a/app/assets/stylesheets/cards.css
+++ b/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 {
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index d795ab09c..5c3072a86 100644
--- a/app/assets/stylesheets/trays.css
+++ b/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 {
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index fa3145508..f4fcf466f 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -6,6 +6,12 @@