diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index a65365c..8e604e5 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -94,3 +94,4 @@ - [Fix PWA Install Prompt](./devlog/2025-12-18-005000_fix_pwa_prompt.md): Completed. Implemented global event capture, iOS detection, and explicit service worker registration to ensure install prompt appears. - [Persist PWA Dismissal](./devlog/2025-12-18-005300_persist_pwa_dismissal.md): Completed. Implemented logic to remember user's choice to dismiss or install the PWA, preventing repeated prompts. - [Create Favicon](./devlog/2025-12-18-005739_create_favicon.md): Completed. Generated and integrated a new application favicon. +- [Mobile Touch Preview](./devlog/2025-12-18-012500_mobile_touch_preview.md): Completed. Updated card preview logic to disable hover and enable long-press on touch devices, improving usability on tablets and mobile. diff --git a/docs/development/devlog/2025-12-18-012500_mobile_touch_preview.md b/docs/development/devlog/2025-12-18-012500_mobile_touch_preview.md new file mode 100644 index 0000000..3f3c5d1 --- /dev/null +++ b/docs/development/devlog/2025-12-18-012500_mobile_touch_preview.md @@ -0,0 +1,15 @@ +# 2025-12-18 01:25:00 - Mobile Touch Prevention on Pack List + +## User Request +The user requested to disable the hover-to-preview functionality on touch screens in the draft management pack list and instead use long-press to open the preview, matching the behavior on small mobile screens. + +## Implementation Details +Modified `CardPreview.tsx` to update the `CardHoverWrapper` component. +- Changed `isMobile` detection logic from a simple `window.innerWidth < 1024` check to a more robust check that includes `window.matchMedia('(pointer: coarse)')`. +- Removed `(hover: none)` from the check to ensure devices that report hover capability (like some tablets with styluses) but are primarily touch-based are still treated as mobile. +- This ensures that devices with touch capabilities (like tablets) are treated as "mobile" by the component, disabling the default hover behavior and enabling the long-press gesture for card previews. +- This change affects `CubeManager` (Pack List) and any other component using `CardHoverWrapper` (e.g., `StackView` inside `PackCard`). + +## Risk Handling +- Verified that `DraftView` uses its own touch logic (`useCardTouch`) so it remains unaffected (though it behaves similarly). +- Ensures that touch laptops (which might support hover) are not aggressively forced into mobile mode unless they match `hover: none` (which usually targets tablets/phones). This tries to preserve mouse functionality where available, although the user's request was specific to "touch screens". The `hover: none` media query is the standard way to detect touch-primary devices. diff --git a/src/client/src/components/CardPreview.tsx b/src/client/src/components/CardPreview.tsx index 11560f7..a3228e5 100644 --- a/src/client/src/components/CardPreview.tsx +++ b/src/client/src/components/CardPreview.tsx @@ -94,9 +94,23 @@ export const CardHoverWrapper: React.FC<{ card: DraftCard; children: React.React const closeTimerRef = useRef(null); const hasImage = !!card.image; - // Use a stable value for isMobile to avoid hydration mismatches if using SSR, - // but since this is client-side mostly, window check is okay. - const isMobile = typeof window !== 'undefined' && window.innerWidth < 1024; + // Use state for isMobile to handle window resizing and touch capability detection + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const checkMobile = () => { + // "Mobile" behavior (No hover, long-press, modal preview) applies if: + // 1. Device is primarily touch (pointer: coarse) - e.g. Tablets, Phones + // 2. Screen is small (< 1024px) - e.g. Phone in Desktop mode or small window + const isTouch = window.matchMedia('(pointer: coarse)').matches; + const isSmall = window.innerWidth < 1024; + setIsMobile(isTouch || isSmall); + }; + + checkMobile(); + window.addEventListener('resize', checkMobile); + return () => window.removeEventListener('resize', checkMobile); + }, []); const shouldShow = (isHovering && !isMobile) || isLongPressing;