diff --git a/packages/app/src/Element/Modal.tsx b/packages/app/src/Element/Modal.tsx
index a2bf6f8b..fd3341ce 100644
--- a/packages/app/src/Element/Modal.tsx
+++ b/packages/app/src/Element/Modal.tsx
@@ -61,14 +61,13 @@ export default function Modal(props: ModalProps) {
return createPortal(
-
-
{
- e.stopPropagation();
- props.onClick?.(e);
- }}>
- {props.children}
-
+
{
+ e.stopPropagation();
+ props.onClick?.(e);
+ }}>
+ {props.children}
,
document.body,
diff --git a/packages/app/src/Element/Spotlight/SpotlightMedia.tsx b/packages/app/src/Element/Spotlight/SpotlightMedia.tsx
index 109dae3a..0119f338 100644
--- a/packages/app/src/Element/Spotlight/SpotlightMedia.tsx
+++ b/packages/app/src/Element/Spotlight/SpotlightMedia.tsx
@@ -83,8 +83,14 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
}
}, [image, isVideo]);
+ const onClickBg = (e: React.MouseEvent) => {
+ if (e.target === e.currentTarget) {
+ props.onClose();
+ }
+ };
+
return (
- <>
+
{mediaEl}
+
+
{props.images.length > 1 && `${idx + 1}/${props.images.length}`}
{props.images.length > 1 && (
@@ -116,7 +124,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
/>
>
)}
- >
+
);
}