From 1c49ae6b7c06922de5eb462812bbb55ec84ee6c6 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Tue, 9 Jun 2026 21:12:37 -0700
Subject: [PATCH] FN-6153: fix mobile quick-entry toggle touch handling

Prevent mobile quick-entry action taps from being swallowed by browser touch gestures.

- apply a mobile touch-action override to quick-entry action containers and their descendants
- keep the existing mobile button sizing while removing the redundant per-button touch-action rule
- add a regression test that inspects the mobile CSS rule covering quick-entry action controls

Files changed:
 .changeset/quick-entry-mobile-touch.md                  |  5 +++++
 packages/dashboard/app/components/QuickEntryBox.css     |  8 ++++----
 packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx | 17 +++++++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

Fusion-Task-Id: FN-6153

Fusion-Task-Lineage: e915bb06-2c45-4d96-b719-2b7efcf6f986
---
 .changeset/quick-entry-mobile-touch.md          |  5 +++++
 .../dashboard/app/components/QuickEntryBox.css  |  8 ++++----
 .../components/__tests__/QuickEntryBox.test.tsx | 17 +++++++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/quick-entry-mobile-touch.md

diff --git a/.changeset/quick-entry-mobile-touch.md b/.changeset/quick-entry-mobile-touch.md
new file mode 100644
index 0000000000..c935f7d4f6
--- /dev/null
+++ b/.changeset/quick-entry-mobile-touch.md
@@ -0,0 +1,5 @@
+---
+"@runfusion/fusion": patch
+---
+
+Fix mobile quick-entry action buttons so nested icons and labels do not trigger browser touch gestures instead of toggling their controls.
diff --git a/packages/dashboard/app/components/QuickEntryBox.css b/packages/dashboard/app/components/QuickEntryBox.css
index e58d52e792..4491016bc1 100644
--- a/packages/dashboard/app/components/QuickEntryBox.css
+++ b/packages/dashboard/app/components/QuickEntryBox.css
@@ -428,15 +428,15 @@
   }
 }
 
-/* === Quick Entry Mobile Touch + Overflow Fixes (FN-1140) === */
+/* === Quick Entry Mobile Touch + Overflow Fixes (FN-1140, FN-6153) === */
 @media (max-width: 768px) {
-  .quick-entry-actions {
-    touch-action: manipulation;
+  .quick-entry-actions,
+  .quick-entry-actions * {
+    touch-action: none;
   }
 
   .quick-entry-actions .btn {
     min-height: 36px;
-    touch-action: manipulation;
   }
 
   .quick-entry-box .dep-dropdown {
diff --git a/packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx b/packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx
index 6cb6d75e64..f7c62bc87b 100644
--- a/packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx
+++ b/packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx
@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
 import { QuickEntryBox } from "../QuickEntryBox";
@@ -25,6 +26,15 @@ const MOCK_MODELS = [
 
 const TEST_PROJECT_ID = "proj-123";
 const QUICK_ENTRY_STORAGE_KEY = scopedKey("kb-quick-entry-text", TEST_PROJECT_ID);
+const QUICK_ENTRY_BOX_CSS = readFileSync("app/components/QuickEntryBox.css", "utf8");
+
+function quickEntryMobileActionsTouchRule() {
+  return (
+    QUICK_ENTRY_BOX_CSS.match(
+      /@media \(max-width: 768px\) \{[\s\S]*?(\.quick-entry-actions,\s*\.quick-entry-actions \*\s*\{[\s\S]*?\})/,
+    )?.[1] ?? ""
+  );
+}
 
 const CREATED_TASK: Task = {
   id: "FN-999",
@@ -3204,6 +3214,13 @@ describe("QuickEntryBox", () => {
   });
 
   describe("QuickEntryBox Mobile", () => {
+    it("keeps quick-entry action controls and descendants out of browser touch gesture handling on mobile", () => {
+      const touchRule = quickEntryMobileActionsTouchRule();
+
+      expect(touchRule).toMatch(/\.quick-entry-actions,\s*\.quick-entry-actions \*/);
+      expect(touchRule).toMatch(/touch-action:\s*none;/);
+    });
+
     it("keeps inline deps/models controls in touch-target button classes on mobile", () => {
       vi.spyOn(window, "innerWidth", "get").mockReturnValue(375);