diff --git a/client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx b/client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx index f4c671f4f..4a3c6700b 100644 --- a/client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx +++ b/client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx @@ -1,3 +1,4 @@ +import { Checkbox } from "antd"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; /** @@ -7,18 +8,19 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; * - images: Array<{ src, fullsize, filename?, isSelected? }> * - onToggle(index) * - onClick(index) optional for viewing + * - thumbSize: automatically set to 125 for chat, 250 for default */ export function LocalMediaGrid({ images, onToggle, onClick, - thumbSize = 100, gap = 8, minColumns = 3, maxColumns = 12, context = "default", expandHeight = false }) { + const thumbSize = context === "chat" ? 100 : 180; const containerRef = useRef(null); const [cols, setCols] = useState(() => { // Pre-calc initial columns to stabilize layout before images render @@ -133,7 +135,7 @@ export function LocalMediaGrid({ role="listitem" tabIndex={0} aria-label={img.filename || `image ${idx + 1}`} - onClick={() => onClick ? onClick(idx) : onToggle(idx)} + onClick={() => (onClick ? onClick(idx) : onToggle(idx))} onKeyDown={(e) => handleKeyDown(e, idx)} style={{ position: "relative", @@ -200,8 +202,7 @@ export function LocalMediaGrid({ /> )} {onClick && ( - { e.stopPropagation(); @@ -209,10 +210,12 @@ export function LocalMediaGrid({ }} onClick={(e) => e.stopPropagation()} style={{ - position: 'absolute', + position: "absolute", top: 5, - right: 5, - zIndex: 2 + left: 5, + zIndex: 2, + opacity: img.isSelected ? 1 : 0.4, + transition: "opacity 0.3s" }} /> )}