fix(DomeGallery): Resolve mobile tap/touch conflict and sizing animation across all variants

[KartikKar19]

Fixes #559

Description of the Fix

This Pull Request resolves the critical mobile bug in the <DomeGallery /> component where a tap on an image tile would often fail to trigger the image enlargement animation or result in incorrect final sizing.

Root Cause and Solution

The issue stemmed from a conflict in event handling:

1. Root Cause: The image tile elements had redundant native event handlers (onClick, onTouchEnd) which competed with the comprehensive drag and tap detection logic provided by the @use-gesture/react library on the main container. On mobile, a quick tap is often registered as a slight drag, causing the native events to be cancelled, breaking the animation flow.

2. Solution:

   • Removed all redundant onClick, onPointerUp, and onTouchEnd handlers from the individual image tile JSX elements.
   • Unified the tap/click detection logic entirely within the robust useGesture hook on the main container (mainRef). This hook reliably distinguishes between a drag (for rotation) and a clean tap (to call openItemFromElement), ensuring consistent behavior across all devices.

Compliance and Verification

• All 4 Variants Updated: As required by the contribution guidelines, this fix has been applied to all four component variants:

  • src/content/Components/DomeGallery/DomeGallery.jsx
  • src/tailwind/Components/DomeGallery/DomeGallery.jsx
  • TypeScript/CSS (src/ts-default/.../DomeGallery.tsx)
  • TypeScript/Tailwind (src/ts-tailwind/.../DomeGallery.tsx)

• Local Testing: Confirmed functionality on desktop (drag/click) and mobile (swipe/tap). No console errors.

Proof/Testing

The video below demonstrates the successful execution of the enlargement animation after the fix is applied.

domereactbits.mp4

[KartikKar19]

Hey could you please review the changes and give me the feedback or merge the pull request I want to work on the LightRays component color issue too