packages/app/src/Element/Deck/SpotlightMedia.tsx

@@ -74,7 +74,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
 
 export function SpotlightMediaModal(props: SpotlightMediaProps) {
   return (
-    <Modal id="spotlight" onClose={props.onClose} className="spotlight">
+    <Modal id="spotlight" onClick={props.onClose} onClose={props.onClose} className="spotlight">
       <SpotlightMedia {...props} />
     </Modal>
   );

packages/app/src/Element/Modal.tsx

@@ -5,6 +5,7 @@ export interface ModalProps {
   id: string;
   className?: string;
   onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
+  onClick?: (e: React.MouseEvent) => void;
   children: ReactNode;
 }
 
@@ -28,7 +29,10 @@ export default function Modal(props: ModalProps) {
   return (
     <div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
       <div className="modal-body" onClick={props.onClose}>
-        <div onClick={e => e.stopPropagation()}>{props.children}</div>
+        <div onClick={e => {
+          e.stopPropagation();
+          props.onClick?.(e);
+        }}>{props.children}</div>
       </div>
     </div>
   );