Fix: Filterable Gallery video lightbox requires two taps on Android (gate hover-only overlay)

[sadmansakibnadvi]

Executive Summary

On Android (Chrome, Samsung Internet) the video play overlay needs two taps to open the lightbox; the first tap is consumed as a hover-reveal. This gates the video overlay's hover-only effects behind @media (hover: hover) and (pointer: fine) so touch devices have no hover-dependent state change and the first tap activates the lightbox. Customer-facing, lowest risk of the set, isolated to one SCSS file (+ compiled assets).

Problem Statement

.video-popup-bg is visibility:hidden; opacity:0, revealed only via .eael-gallery-grid-item:hover, and the play icon scales via .video-popup:hover>img. On touch the sequence touchstart → mouseover(:hover) → click causes Android to consume the first tap as a hover-reveal and require a second tap. iOS Safari resolves the tap to a click, so the bug is Android-specific.

Root Cause

Hover is the only interaction path for the video overlay, with no touch fallback. A repo-wide grep of src/css/view/filterable-gallery.scss for @media (hover…) / hover: none / pointer: returns zero guards. Source: src/css/view/filterable-gallery.scss:530 and :540.

Technical Solution

Wrap the two hover-only rules in @media (hover: hover) and (pointer: fine). The play icon (.video-popup>img) is already always visible, so on touch the tile stays fully tappable and the first tap opens the lightbox. No new always-on styles.

Detailed File Changes

src/css/view/filterable-gallery.scss — gate video-overlay hover effects behind hover capability.

-.video-popup:hover>img {
-	transform: scale(1.1);
-}
-
 .video-popup-bg { visibility: hidden; opacity: 0; transition: 350ms; }

-.eael-gallery-grid-item:hover .video-popup-bg {
-	visibility: visible;
-	opacity: 1;
-}
+@media (hover: hover) and (pointer: fine) {
+	.video-popup:hover>img { transform: scale(1.1); }
+	.eael-gallery-grid-item:hover .video-popup-bg { visibility: visible; opacity: 1; }
+}

assets/front-end/css/view/filterable-gallery.css / .min.css — regenerated compiled output (npm run build); ships compiled CSS.

QA Checklist

Desktop (hover must still work): [ ] Chrome [ ] Firefox [ ] Safari [ ] Edge — hover scales icon + reveals bg; click opens lightbox.
Mobile (single-tap): [ ] Android Chrome (acceptance) [ ] Samsung Internet [ ] iOS Safari — one tap opens video.
Widget modes: [ ] Card [ ] Search & Filter (incl. after filter + Load More).
Content: [ ] Image (unchanged) [ ] Video (single-tap on Android).

Regression Checklist

[ ] Desktop hover timing (300/350ms) unchanged. [ ] No layout shift on touch. [ ] Windows touch laptops (hover: hover) keep hover effects. [ ] Android tablets (hover: none) get tap-first. [ ] Masonry + fitRows verified.

Accessibility Review

No DOM/semantic change. Keyboard activation via the anchor unaffected. Touch users gain reliable single-activation.

Backward Compatibility

Fully compatible. No classes/markup/settings change. Only intended delta: decorative dark overlay not shown on first tap on touch.

Risk Assessment

Low. One SCSS file + compiled assets. Worst case cosmetic (overlay not shown on touch), not functional.

Rollback

Revert the single commit (SCSS + compiled CSS). No migration.

Release Notes

Fixed: Filterable Gallery video items now open on the first tap on Android (Chrome, Samsung Internet). Hover overlay effects are now limited to devices that support hovering.

Reviewer Notes

Same hover-only pattern exists for .card-hover-bg (scss:556-565), hoverer captions (426/479), layout-3 categories (1042). Scoped here to the validated video root cause; recommend a follow-up applying the same guard. Deliberately did not force the dark bg visible on touch (play icon already visible) to avoid changing the touch visual.