Enhance image name handling and accessibility

Updated getImageName function to handle both Unix and Windows path separators. Modified the image name display to include a title attribute for better accessibility.

Author: rahulharpal1603

frontend/src/components/Media/MediaInfoPanel.tsx

@@ -34,7 +34,8 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
 
   const getImageName = () => {
     if (!currentImage) return 'Image';
-    return currentImage.path?.split('/').pop() || 'Image';
+    // Handle both Unix (/) and Windows (\) path separators
+    return currentImage.path?.split(/[/\\]/).pop() || 'Image';
   };
 
   if (!show) return null;
@@ -57,9 +58,14 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
           <div className="rounded-lg bg-white/10 p-2">
             <ImageLucide className="h-5 w-5 text-blue-400" />
           </div>
-          <div className='min-w-0 flex-1'>
+          <div className="min-w-0 flex-1">
             <p className="text-xs text-white/50">Name</p>
-            <p className="truncate font-medium text-white">{getImageName()}</p>
+            <p
+              className="truncate font-medium text-white"
+              title={getImageName()}
+            >
+              {getImageName()}
+            </p>
           </div>
         </div>
 
@@ -77,7 +83,7 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
           <div className="rounded-lg bg-white/10 p-2">
             <MapPin className="h-5 w-5 text-red-400" />
           </div>
-          <div className='min-w-0 flex-1'>
+          <div className="min-w-0 flex-1">
             <p className="text-xs text-white/50">Location</p>
             <p className="font-medium text-white">
               {currentImage?.metadata || 'No location data'}