Improved image expansion in Projects. Introduced Mods page.

components/SimpleGallery.tsx

@@ -18,6 +18,9 @@ export default function SimpleGallery({
 
   const [active, setActive] = useState(0);
   const [isEnlarged, setIsEnlarged] = useState<Boolean>(false);
+  // Hovering the media itself mirrors the expand button's own hover state, so
+  // the button reads as the affordance for the click the media now accepts.
+  const [mediaHovered, setMediaHovered] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const fsPortalRef = useRef<HTMLDivElement | null>(null);
@@ -39,8 +42,8 @@ export default function SimpleGallery({
 
   function expandButton() {
     return (
-      <div 
-      className="gallery-action-button"
+      <div
+      className={`gallery-action-button${mediaHovered ? " is-hovered" : ""}`}
       style={{
           top: 8,
           right: 8,
@@ -63,7 +66,6 @@ export default function SimpleGallery({
           <path d="M13 13L8.5 8.5" strokeWidth="1.5" strokeLinecap="round" />
         </svg>
       </button>
-      Expand
       </div>
     );
   }
@@ -127,7 +129,8 @@ export default function SimpleGallery({
             alt={`${title} screenshot ${active + 1}`}
             width={800}
             height={600}
-            style={imageStyle}
+            onClick={() => setIsEnlarged(true)}
+            style={{ ...imageStyle, cursor: "zoom-in" }}
           />
         )}
 
@@ -316,7 +319,21 @@ export default function SimpleGallery({
   return (
     <>
       <div style={{ marginBottom: 8 }}>
-        <div style={{ position: "relative", display: "inline-block", width: "100%" }}>
+        {/* The border is always present but transparent when idle, so lighting it
+            up on hover can't nudge the surrounding layout. */}
+        <div
+          onMouseEnter={() => setMediaHovered(true)}
+          onMouseLeave={() => setMediaHovered(false)}
+          style={{
+            position: "relative",
+            display: "inline-block",
+            width: "100%",
+            padding: 3,
+            borderRadius: 7,
+            border: `1px solid ${mediaHovered ? "var(--border-strong)" : "transparent"}`,
+            transition: "border-color 0.15s ease",
+          }}
+        >
           {inlineMedia()}
         </div>
         {thumbnailStrip()}