use escape to close images (#355)

frontend/src/components/listing/artifacts/ImageModal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useEffect } from "react";
 import { FaTimes } from "react-icons/fa";
 
 interface ImageModalProps {
@@ -14,11 +14,29 @@ const ImageModal: React.FC<ImageModalProps> = ({
   imageUrl,
   altText,
 }) => {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, handleKeyDown]);
+
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-      <div className="relative max-w-4xl w-full">
+      <div className="relative max-h-[90vh] max-w-[90vw] aspect-square">
         <button
           onClick={onClose}
           className="absolute top-2 right-2 text-white bg-black bg-opacity-50 rounded-full p-2 hover:bg-opacity-75 transition-colors duration-200"
@@ -28,7 +46,7 @@ const ImageModal: React.FC<ImageModalProps> = ({
         <img
           src={imageUrl}
           alt={altText}
-          className="w-full h-auto rounded-lg bg-white p-8"
+          className="w-full h-full rounded-lg bg-white p-8 max-h-[90vh] max-w-[90vw]"
         />
       </div>
     </div>