From ae1b7627711f2f4cb425451dcd095510bbc70201 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 6 Dec 2023 16:57:52 +0200
Subject: [PATCH] close thread spotlight on bg click

---
 .../app/src/Element/Spotlight/SpotlightThreadModal.tsx     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx b/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
index f0c7aa70..3fefe8e8 100644
--- a/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
+++ b/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
@@ -9,12 +9,17 @@ import { NostrLink } from "@snort/system";
 export function SpotlightThreadModal(props: { thread: NostrLink; onClose?: () => void; onBack?: () => void }) {
   const onClose = () => props.onClose?.();
   const onBack = () => props.onBack?.();
+  const onClickBg = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  }
 
   return (
     <Modal id="thread-overlay" onClose={onClose} bodyClassName={"flex flex-1"}>
       <ThreadContextWrapper link={props.thread}>
         <div className="flex flex-row h-screen w-screen">
-          <div className="flex w-full md:w-2/3 items-center justify-center overflow-hidden">
+          <div className="flex w-full md:w-2/3 items-center justify-center overflow-hidden" onClick={onClickBg}>
             <SpotlightFromThread onClose={onClose} />
           </div>
           <div className="hidden md:flex w-1/3 min-w-[400px] flex-shrink-0 overflow-y-auto bg-bg-color">