From e861f238f078ff47b895485fc441b4751a97a0b8 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 7 Dec 2023 11:59:05 +0200
Subject: [PATCH] spotlight layout

---
 packages/app/src/Element/Modal.tsx                | 15 +++++++--------
 .../app/src/Element/Spotlight/SpotlightMedia.tsx  | 12 ++++++++++--
 2 files changed, 17 insertions(+), 10 deletions(-)

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(
     <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,
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 (
-    <>
+    <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>
   );
 }