Meal plan editing on iPad drags items rather than scrolls

[andrew-codechimp]

First Check

• [X] This is not a feature request.
• [X] I added a very descriptive title to this issue (title field is above this).
• [X] I used the GitHub search to find a similar issue and didn't find it.
• [X] I searched the Mealie documentation, with the integrated search.
• [X] I already read the docs and didn't find an answer.
• [X] This issue can be replicated on the demo site (https://demo.mealie.io/).

What is the issue you are experiencing?

When using the meal planner edit mode on iPad the whole meal is a touch target, causing you to drag a meal by accident when trying to scroll. On iPhone only the grab handle is the touch target for moving the meal so scrolling works fine. It would seem the site is treating an iPad the same as a desktop browser but for touch it should be acting like the iPhone experience.

Steps to Reproduce

On an iPad go into Meal Planner Edit meal plan Add meals to fill the whole screen Try to scroll where there is a meal It moves the meal rather than scrolling the page.

Please provide relevant logs

N/A

Mealie Version

1.8.0

Deployment

Docker (Linux)

Additional Deployment Details

No response

[boc-the-git]

This is also a problem on my Android tablet.

I don't see this as a critical issue, you can easily scroll by touching somewhere other than the meal planner entry.. but it is certainly annoying! My assumption (based on absolutely no research!!) is it's something to do with how Vue/Nuxt is interpreting the mobile vs desktop interface of the browser/device.