fix(gallery): Use Link component for Lockdown Mode compatibility (mobile + desktop)

[maxrantil]

Problem

Gallery items are not clickable on browsers with Lockdown Mode or strict security settings enabled.

Affects:

• ❌ Mobile: iOS Safari and Brave with Lockdown Mode
• ❌ Desktop: Safari and Brave on macOS with strict security settings

Fixes #259

Root Cause

Both mobile and desktop galleries used onClick handlers on non-interactive HTML elements (<article> and <div>). Browsers with strict security settings (iOS Lockdown Mode, Safari/Brave with shields) block JavaScript click events on non-interactive elements as a security measure.

Solution Implemented

Replace non-interactive elements with Next.js <Link> component, which renders as semantic <a> tags that work natively without JavaScript.

Technical Changes

Mobile Gallery (MobileGalleryItem.tsx)

Before (Broken in Lockdown Mode):
```tsx

{/* content */} \`\`\`

After (Lockdown Mode Compatible):
```tsx

{/* content */} \`\`\`

Desktop Gallery (Gallery.tsx)

Before (Broken with strict security):
```tsx

{/* content */}

\`\`\`

After (Security-compatible):
```tsx

{/* content */}

\`\`\`

Benefits

• ✅ Lockdown Mode Compatible: Links are native HTML elements that work without JavaScript
• ✅ Better Semantics: <a> tag for navigation (proper HTML5)
• ✅ Accessibility: Links are keyboard accessible by default
• ✅ Analytics Preserved: onClick handler fires before navigation for tracking
• ✅ Progressive Enhancement: Works even if JavaScript fails to load

Testing

Unit Tests

• ✅ All 66 Gallery tests passing
• ✅ Updated tests to verify Link element behavior (href attribute)
• ✅ Confirmed ARIA attributes, keyboard navigation, touch handling

E2E Tests

• 🧪 NEEDS MANUAL TESTING on actual devices with Lockdown Mode

Files Changed

• src/components/mobile/Gallery/MobileGalleryItem.tsx: Use Link instead of article
• src/components/desktop/Gallery/Gallery.tsx: Use Link instead of div
• src/components/mobile/Gallery/__tests__/MobileGalleryItem.test.tsx: Updated tests
• src/components/mobile/Gallery/__tests__/MobileGallery.test.tsx: Updated tests
• tests/integration/real-gallery-navigation.test.tsx: Updated integration tests

Manual Testing Required

Doctor Hubert, please test on your devices:

Desktop Testing

1. Open idaromme.dk on your laptop (Safari/Brave with security settings)
2. Navigate to homepage gallery
3. Click on any gallery item
4. ✅ Expected: Should navigate to project page immediately

Mobile Testing

1. Open idaromme.dk on iPhone (Lockdown Mode enabled)
2. Scroll to gallery
3. Tap on any gallery item
4. ✅ Expected: Should navigate to project page immediately

Browsers to Test

• Desktop Safari (macOS)
• Desktop Brave (macOS with shields)
• iPhone Safari (Lockdown Mode)
• iPhone Brave (Lockdown Mode)

Deployment

Once tested and confirmed working on all devices, this can be merged and deployed.

[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)

[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]

🔍 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]

🔍 Lighthouse Performance Report

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

---

This report was generated by Lighthouse CI in GitHub Actions

[codecov-commenter]

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

Codecov Report

❌ Patch coverage is 82.97872% with 8 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...rc/components/mobile/Gallery/MobileGalleryItem.tsx	80.95%	8 Missing ⚠️

📢 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