Fix #658: extend image viewer navigation hover and click area

[PrathamMehta101]

Issue

Closes #658

Problem

Currently, the navigation arrows in the image preview / fullscreen mode only respond when the cursor is placed precisely on the icon. This requires pixel-perfect mouse positioning, which can feel unintuitive and cumbersome—especially when viewing large images or navigating quickly.

Solution

This change introduces a larger, invisible interaction zone around each navigation arrow:

• Hovering anywhere within this zone highlights and slightly scales the arrow
• Clicking anywhere inside the zone triggers navigation
• The arrow’s visual size and layout remain unchanged

This behavior mirrors that of native photo viewers (e.g., Windows Photos, macOS Preview) and significantly improves overall UX.

This change is purely UI/UX-focused and does not modify business logic or application state. No additional tests were added as the behavior is visual and interaction-based.

Screen.Recording.2025-12-20.160857.mp4

This change makes image navigation feel more natural and forgiving, aligning PictoPy’s behavior with standard photo viewing experiences.

Summary by CodeRabbit

• Style
  • Redesigned Previous and Next navigation buttons with enhanced hover effects and improved visual feedback for better user interactions.

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

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[coderabbitai]

Walkthrough

Two distinct areas are modified: the OpenAPI schema documentation is updated with parameter schema compositions and metadata object adjustments, while the NavigationButtons React component's styling is refactored from inline classes to group-wrapped containers with enhanced hover effects.

Changes

Cohort / File(s)	Summary
OpenAPI Schema Updates docs/backend/backend_python/openapi.json	Input type parameter schema wrapped in allOf with added title metadata; ImageInCluster.Metadata anyOf option modified to remove additionalProperties flag.
UI Component Styling frontend/src/components/Media/NavigationButtons.tsx	Navigation buttons refactored from inline styling to group-wrapped containers with 40x40 transparent button layout; icon elements wrapped in rounded div with enhanced hover effects (scale, background, shadow).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• OpenAPI schema changes are straightforward composition and metadata adjustments with minimal semantic impact
• Button component refactoring is purely stylistic with no functional or prop signature changes

Poem

🐰 With schemas refined and buttons so neat,
Our interfaces now look complete!
Group wrappers dance and hover effects gleam,
A polished-up frontend's dream. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and clearly summarizes the main change: extending the hover and click area for image viewer navigation buttons.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 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.}

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[V4Vikaskumar]

Hi, I see there’s already an open PR for this issue.
If it’s okay, I can work on an alternative or improved solution in case changes are needed.
Please let me know.