feat(file-preview): dismiss TOC overlay on click outside

Add an invisible fixed backdrop behind the TOC overlay that captures
clicks outside the menu, providing standard dismiss-on-click-outside
behavior.
This commit is contained in:
Pedram Amini
2026-02-01 15:57:47 -05:00
parent db5ae7cac1
commit 274698efea

View File

@@ -2085,16 +2085,22 @@ export const FilePreview = forwardRef<FilePreviewHandle, FilePreviewProps>(funct
{/* TOC Overlay */}
{showTocOverlay && (
<div
className="absolute bottom-16 right-4 rounded-lg shadow-xl overflow-hidden z-20 animate-in fade-in slide-in-from-bottom-2 duration-200 flex flex-col"
style={{
backgroundColor: theme.colors.bgSidebar,
border: `1px solid ${theme.colors.border}`,
maxHeight: 'calc(70vh - 80px)',
minWidth: '200px',
maxWidth: '350px',
}}
>
<>
{/* Click-outside backdrop */}
<div
className="fixed inset-0 z-15"
onClick={() => setShowTocOverlay(false)}
/>
<div
className="absolute bottom-16 right-4 rounded-lg shadow-xl overflow-hidden z-20 animate-in fade-in slide-in-from-bottom-2 duration-200 flex flex-col"
style={{
backgroundColor: theme.colors.bgSidebar,
border: `1px solid ${theme.colors.border}`,
maxHeight: 'calc(70vh - 80px)',
minWidth: '200px',
maxWidth: '350px',
}}
>
{/* TOC Header */}
<div
className="px-3 py-2 border-b flex items-center justify-between flex-shrink-0"
@@ -2193,6 +2199,7 @@ export const FilePreview = forwardRef<FilePreviewHandle, FilePreviewProps>(funct
<span>Bottom</span>
</button>
</div>
</>
)}
</>
)}