From 62caaa0ab086acc565c428f86ab4dd31b5204850 Mon Sep 17 00:00:00 2001
From: kris <krisoso.com@gmail.com>
Date: Mon, 30 Mar 2026 01:11:41 +0800
Subject: [PATCH] feat: improve mobile touch semantics

---
 web/storyforge-web-v4/assets/app.js                | 14 ++++++++++++--
 web/storyforge-web-v4/assets/styles.css            |  3 +++
 .../tests/workbench-pages.test.mjs                 |  8 ++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

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 `
+      <button
+        class="${classes.join(" ")}"
+        type="button"
+        data-action="${escapeHtml(targetAction)}"
+        ${options.disabledReason ? `data-disabled-reason="${escapeHtml(options.disabledReason)}" aria-disabled="true"` : ""}
+        ${title ? `title="${escapeHtml(title)}"` : ""}
+        ${attrs}
+      >${escapeHtml(label)}</button>
+    `.replace(/\s+/g, " ").trim();
+  }
   return `
     <span
       class="${classes.join(" ")}"
-      ${targetAction ? `data-action="${escapeHtml(targetAction)}"` : ""}
-      ${options.disabledReason ? `data-disabled-reason="${escapeHtml(options.disabledReason)}" aria-disabled="true"` : ""}
       ${title ? `title="${escapeHtml(title)}"` : ""}
       ${attrs}
     >${escapeHtml(label)}</span>
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, /<button/);
+  assert.match(actionTagSource, /type="button"/);
+  assert.match(actionTagSource, /<span/);
+});
+
 test("mobile screen heads split the first action into a primary rail and keep the rest in a secondary strip", () => {
   assert.match(APP, /function splitPrimaryAction\(actionsHtml\)/);
   assert.match(APP, /class="action-row-primary"/);