Enhancement: extend hover activation hotspot for navigation arrows

Co-authored-by: Rahul Harpal <51887323+rahulharpal1603@users.noreply.github.com>

Author: Arpitsh7

frontend/src/components/Media/NavigationButtons.tsx

@@ -14,18 +14,22 @@ export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
     <>
       <button
         onClick={onPrevious}
-        className="absolute top-1/2 left-4 z-30 flex -translate-y-1/2 transform cursor-pointer items-center rounded-full bg-black/30 p-3 text-white backdrop-blur-md transition-all duration-200 hover:bg-black/50 hover:shadow-lg"
+        className="group absolute inset-y-0 left-0 z-30 flex w-20 cursor-pointer items-center justify-center bg-transparent text-white"
         aria-label="Previous image"
       >
-        <ChevronLeft className="h-6 w-6" />
+        <span className="flex items-center justify-center rounded-full p-3 backdrop-blur-md transition-all duration-200 group-hover:bg-black/80 group-hover:shadow-lg">
+          <ChevronLeft className="h-6 w-6" />
+        </span>
       </button>
 
       <button
         onClick={onNext}
-        className="absolute top-1/2 right-4 z-30 flex -translate-y-1/2 transform cursor-pointer items-center rounded-full bg-black/30 p-3 text-white backdrop-blur-md transition-all duration-200 hover:bg-black/50 hover:shadow-lg"
+        className="group absolute inset-y-0 right-0 z-30 flex w-20 cursor-pointer items-center justify-center bg-transparent text-white"
         aria-label="Next image"
       >
-        <ChevronRight className="h-6 w-6" />
+        <span className="flex items-center justify-center rounded-full p-3 backdrop-blur-md transition-all duration-200 group-hover:bg-black/80 group-hover:shadow-lg">
+          <ChevronRight className="h-6 w-6" />
+        </span>
       </button>
     </>
   );