diff --git a/web/storyforge-web-v4/assets/app.js b/web/storyforge-web-v4/assets/app.js
index e590a72..3644c5e 100644
--- a/web/storyforge-web-v4/assets/app.js
+++ b/web/storyforge-web-v4/assets/app.js
@@ -4438,11 +4438,21 @@ function actionTag(label, action, attrs = "", options = {}) {
classes.push("clickable-tag");
}
const title = options.disabledReason || options.title || "";
+ if (targetAction) {
+ return `
+
+ `.replace(/\s+/g, " ").trim();
+ }
return `
${escapeHtml(label)}
diff --git a/web/storyforge-web-v4/assets/styles.css b/web/storyforge-web-v4/assets/styles.css
index 6580add..7d65102 100644
--- a/web/storyforge-web-v4/assets/styles.css
+++ b/web/storyforge-web-v4/assets/styles.css
@@ -1019,6 +1019,7 @@ select {
display: inline-flex;
align-items: center;
justify-content: center;
+ appearance: none;
padding: 5px 9px;
border-radius: 999px;
background: #f6f9fe;
@@ -1026,6 +1027,8 @@ select {
color: var(--muted);
font-size: 11px;
line-height: 1.1;
+ font-family: inherit;
+ text-decoration: none;
}
.row-meta .tag {
diff --git a/web/storyforge-web-v4/tests/workbench-pages.test.mjs b/web/storyforge-web-v4/tests/workbench-pages.test.mjs
index ee2beec..b6daf4a 100644
--- a/web/storyforge-web-v4/tests/workbench-pages.test.mjs
+++ b/web/storyforge-web-v4/tests/workbench-pages.test.mjs
@@ -100,6 +100,14 @@ test("mobile touch targets raise tappable buttons, tabs, and action tags closer
assert.match(CSS, /@media \(max-width: 760px\)[\s\S]*\.btn,\s*[\s\S]*\.tab,\s*[\s\S]*\.tag\.clickable-tag\s*\{[\s\S]*display:\s*inline-flex/);
});
+test("action tags render interactive controls as buttons instead of passive spans", () => {
+ const actionTagSource = extractBetween(APP, "function actionTag(", "function renderPipelineButton(");
+ assert.match(actionTagSource, /if \(targetAction\) \{/);
+ assert.match(actionTagSource, /