sync: update from private repo (63a6e76)

ui/src/components/files/FilePreview.tsx

@@ -7,6 +7,7 @@ import hljs from 'highlight.js';
 import { updateLocalFileContent } from '../../api';
 import { EmbedBlock } from '../embed/EmbedBlock';
 import { OUTPUT_PATH_REGEX, linkifyOutputPathsInEscapedHtml } from '../../lib/output-path-detect';
+import { useBackdropClose } from '../../lib/useBackdropClose';
 
 mermaid.initialize({ startOnLoad: false, theme: 'default' });
 
@@ -625,6 +626,7 @@ export function FilePreview({ name, content, imageSrc, markdownImageBaseUrl, onC
   const [error, setError] = useState('');
   const [currentContent, setCurrentContent] = useState(content);
   const [printing, setPrinting] = useState(false);
+  const backdrop = useBackdropClose(onClose);
 
   const canEdit = editable && taskId != null && section && filePath;
   const isMarkdownFile = /\.(md|markdown)$/i.test(name);
@@ -734,7 +736,7 @@ export function FilePreview({ name, content, imageSrc, markdownImageBaseUrl, onC
   const modalWidth = 'min(1400px, 96vw)';
 
   return (
-    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-[env(safe-area-inset-top)_env(safe-area-inset-right)_env(safe-area-inset-bottom)_env(safe-area-inset-left)]" onClick={onClose}>
+    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-[env(safe-area-inset-top)_env(safe-area-inset-right)_env(safe-area-inset-bottom)_env(safe-area-inset-left)]" {...backdrop}>
       <div
         className="bg-surface rounded-md border border-hairline shadow-md flex flex-col overflow-hidden"
         style={{ width: modalWidth, maxHeight: 'min(90vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px))' }}