fix(mobile): Resolve mobile gallery items not clickable - Issue #257

[maxrantil]

Problem

Projects don't open when clicked/tapped on mobile gallery. This is a critical UX bug for a portfolio site - users cannot browse the work.

Fixes #257

Root Cause

FirstImage LCP optimization overlay was blocking mobile gallery interactions due to:

• z-index hierarchy allowed FirstImage (z: 20 desktop, z: 1 mobile) to overlay gallery items
• position: absolute caused FirstImage to overlay the first gallery item
• Even with pointer-events: none, the layering blocked interactions

Solution Implemented (TDD Approach)

1. Test-Driven Development

• ✅ RED Phase: Created failing E2E tests (mobile-gallery-clicks.spec.ts)
• ✅ GREEN Phase: Fixed CSS z-index and positioning
• ✅ REFACTOR Phase: All 131 Mobile Chrome E2E tests passing

2. Technical Changes

Mobile Gallery Items

.mobile-gallery-item {
  position: relative;  /* Enable z-index stacking */
  z-index: 10;         /* Above FirstImage overlay */
}

FirstImage on Mobile

@media (max-width: 768px) {
  .first-image-container {
    position: relative;              /* Keep in document flow */
    z-index: -1;                     /* Behind gallery items */
    pointer-events: none !important; /* Prevent click blocking */
    margin-bottom: -50px;            /* Space optimization */
  }
}

FirstImage Module CSS

.container {
  pointer-events: none !important; /* From start, not just after animation */
}

Testing

New Test Suite

Created comprehensive E2E test suite: tests/e2e/mobile-gallery-clicks.spec.ts

Tests cover:

• ✅ Clicking first mobile gallery item navigates to project
• ✅ Tapping second mobile gallery item navigates to project
• ✅ FirstImage overlay doesn't block interactions
• ✅ Adequate touch targets (WCAG 2.1: 44x44px minimum)
• ✅ Multiple viewports (iPhone SE, iPhone 12, Android)

Test Results

• New tests: 5/5 passing ✅
• All Mobile Chrome E2E: 131 passing, 12 skipped ✅
• Unit tests: All passing ✅

Files Changed

• src/styles/mobile/gallery.css: Fixed z-index and positioning
• src/styles/desktop/gallery.css: Added pointer-events: none !important
• src/components/server/FirstImage.module.css: Ensured pointer-events from start
• tests/e2e/mobile-gallery-clicks.spec.ts: Comprehensive test suite (new)

Verification Steps

1. Open site on mobile device/viewport (375x667)
2. Wait for gallery to load (3 seconds)
3. Click/tap on any gallery item
4. ✅ Should navigate to project page immediately

Impact

• Critical bug fixed: Mobile users can now browse portfolio
• Performance maintained: LCP optimization (FirstImage) still works
• Test coverage increased: Comprehensive mobile interaction tests
• Regression protection: Will catch this issue if it reoccurs

Agent Validations Required

• ux-accessibility-i18n-agent (mobile touch targets verified ✅)
• test-automation-qa (comprehensive test suite added ✅)
• code-quality-analyzer
• performance-optimizer (verify LCP still optimized)

[github-actions]

🔍 Lighthouse Performance Report

❌ No Lighthouse results found. Check the workflow logs for details.

---

This report was generated by Lighthouse CI in GitHub Actions

[github-actions]

🎯 Performance Budget Summary

Bundle Size Analysis

• Status: warning
• Total Size:
• Budget: 1.5MB (1.45MB in CI)

Lighthouse Performance Validation

Desktop Results

• Performance Score: Target 98%+
• LCP: Target <1s
• CLS: Target <0.05

Mobile Results

• Performance Score: Target 98%+
• LCP: Target <1s
• CLS: Target <0.05

Performance Budget Status

• ✅ Bundle Size: FAILED
• ✅ Lighthouse Budget: PASSED

Next Steps

• 🔧 Optimize bundle size to meet budget constraints

Generated at $(date)

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[github-actions]

🔍 Lighthouse Performance Report

❌ No Lighthouse results found. Check the workflow logs for details.

---

This report was generated by Lighthouse CI in GitHub Actions