prevent image dragging

[JaYRaNa213]

Fixes #1120

Description

Currently, images on the Pictopy landing page can be dragged by users, which affects the overall user experience and UI polish.

To improve UX and maintain a clean interaction on the landing page, image dragging should be disabled globally.

Screenshot :

Proposed Solution

Disable image dragging using CSS.

Implementation

Update index.css with the following rule:

/* Prevent image dragging */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

Expected Result

• Images cannot be dragged on the landing page
• Cleaner and more controlled UI interaction
• Improved user experience

Summary by CodeRabbit

• Style
  • Prevented unintended image dragging on the landing page to improve user experience and interaction quality.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds CSS rules to prevent image dragging across browsers by applying vendor-prefixed and standard user-drag: none properties to the img selector, addressing a user experience issue on the landing page.

Changes

Cohort / File(s)	Summary
Image Drag Prevention landing-page/src/index.css	Adds vendor-prefixed CSS properties (-webkit-, -khtml-, -moz-, -o-) and standard user-drag: none to img selector, preventing images from being dragged by users.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 Images sit so still and fair,
No dragging them here or there!
With CSS cross-browser care,
A polished UI beyond compare. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'prevent image dragging' is concise, clear, and directly describes the main change in the pull request.
Linked Issues check	✅ Passed	The pull request successfully implements all requirements from issue #1120: CSS rules added to index.css to prevent image dragging using vendor-prefixed and standard user-drag properties.
Out of Scope Changes check	✅ Passed	All changes are directly related to the objective of preventing image dragging on the landing page; no out-of-scope modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}