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
This commit is contained in:
gsxdsm
2026-06-09 21:12:37 -07:00
parent 235ad8f9ad
commit 1c49ae6b7c
3 changed files with 26 additions and 4 deletions

View File

@@ -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.

View File

@@ -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 {

View File

@@ -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);