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:
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user