spotlight layout

packages/app/src/Element/Modal.tsx

@@ -61,14 +61,13 @@ export default function Modal(props: ModalProps) {
 
   return createPortal(
     <div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
-      <div className={props.bodyClassName || "modal-body"} onClick={props.onClose}>
-        <div
-          onClick={e => {
-            e.stopPropagation();
-            props.onClick?.(e);
-          }}>
-          {props.children}
-        </div>
+      <div
+        className={props.bodyClassName || "modal-body"}
+        onClick={e => {
+          e.stopPropagation();
+          props.onClick?.(e);
+        }}>
+        {props.children}
       </div>
     </div>,
     document.body,

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 (
-    <>
+    <div className="relative h-screen flex items-center flex-1 justify-center" onClick={onClickBg}>
       {mediaEl}
       <div className="select-none absolute flex flex-row items-center gap-4 left-0 top-0 p-4">
         <span
@@ -92,6 +98,8 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
           onClick={props.onClose}>
           <Icon name="x-close" size={24} />
         </span>
+      </div>
+      <div className="select-none absolute flex flex-row items-center gap-4 right-0 top-0 p-4">
         {props.images.length > 1 && `${idx + 1}/${props.images.length}`}
       </div>
       {props.images.length > 1 && (
@@ -116,7 +124,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
           />
         </>
       )}
-    </>
+    </div>
   );
 }