Enhance ImageGrid component by updating button visibility for delete actions; adjust styles for mobile and desktop responsiveness, improving user experience and accessibility.

Author: hode2002

src/components/ImageGrid.tsx

@@ -117,14 +117,22 @@ const ImageGrid = ({ label, urlToRedirect }: props) => {
                                     {label}
                                 </Button>
                                 <Button
-                                    className="cursor-pointer"
+                                    className="hidden cursor-pointer md:flex"
                                     variant="destructive"
                                     size="icon"
                                     onClick={() => handleDeleteClick(image.id)}
                                 >
                                     <Trash />
                                 </Button>
                             </div>
+                            <Button
+                                className="absolute top-0 right-0 flex cursor-pointer flex-col items-center justify-center gap-2 md:hidden"
+                                variant="destructive"
+                                size="icon"
+                                onClick={() => handleDeleteClick(image.id)}
+                            >
+                                <Trash />
+                            </Button>
                         </div>
                     ))}
                 </div>