[44] - Unable to scroll past block on mobile

[Gentyspun]

Issue: #44

Description

Fixes issue with block not being scrollable on touch devices.

On touch devices the block will now only work if the divider is clicked and dragged, on the images themselves the page will scroll, desktop functionality remains unchanged

Change Log

• src/blocks/image-comparison/frontend.js - reworks JS to accommodate touch devices
• src/blocks/image-comparison/styles/frontend.scss - adds some specific touch actions
• src/blocks/image-comparison/styles/shared.scss - removes some pointer events and touch actions

Steps to test

• Add a couple of image comparison blocks to a post with some more content
• Save and view the frontend on a mobile viewport
• You should be able to scroll the page as expected on mobile without the block taking the cursor focus
• UNLESS you click and drag the block divider, then the block should function as expected
• Repeat steps for both vertical and horizontal versions of the block
• Refresh and view on desktop, and block should still function as expected/previously

Screenshots/Videos

http://bigbite.im/v/V6ffO5

AI Usage (if applicable)

• I have GitHub Copilot set up to auto-complete in my IDE.
• I used ChatGPT to confirm my approach was the best solution.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have disclosed all areas where AI assistance was used when creating this pull request, if applicable
• AI code suggestions have been manually reviewed and I understand how they work