fix

frontend/src/detail/PreviewZoomOverlay.tsx

@@ -214,22 +214,22 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
     const key = event.key;
 
     if (key === ' ' || key === 'Space' || key === 'Spacebar') {
-      const target = event.target;
+    const target = event.target;
-      if (target instanceof HTMLElement) {
+    if (target instanceof HTMLElement) {
-        const tag = target.tagName ? target.tagName.toLowerCase() : '';
+      const tag = target.tagName ? target.tagName.toLowerCase() : '';
-        if (
+      if (
-          target.isContentEditable
+        target.isContentEditable
-          || tag === 'input'
+        || tag === 'input'
-          || tag === 'textarea'
+        || tag === 'textarea'
-          || tag === 'select'
+        || tag === 'select'
-        ) {
+      ) {
-          return;
+        return;
-        }
       }
-      event.preventDefault();
-      onClose();
-      return;
     }
+    event.preventDefault();
+    onClose();
+    return;
+  }
 
     if (key === 'Escape') {
       event.preventDefault();
@@ -264,6 +264,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
     if (isPdfDisplay) {
       return;
     }
+    event.stopPropagation();
     toggleZoomAtPoint(event.clientX ?? 0, event.clientY ?? 0);
   };
 
@@ -322,11 +323,11 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
       >
         <div
           className={stageClassName}
-          onClick={(event) => {
+        onClick={(event) => {
-            if (event.target === event.currentTarget) {
+          if (event.target === event.currentTarget) {
-              onClose();
+            onClose();
-            }
+          }
-          }}
+        }}
         >
           <div
             className={containerClassName}

frontend/src/preview/DocumentViewerPanel.tsx

@@ -1,4 +1,5 @@
 import React, {
+  Children,
   useCallback,
   useEffect,
   useMemo,
@@ -432,13 +433,7 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
   const headerLeadingButtons = isSidebarVariant
     ? [collapseButton, maximizeButton].filter(Boolean)
     : [sidebarToggle, closeButton].filter(Boolean);
-  const headerLeadingContent = headerLeadingButtons.length
+  const headerLeadingContent = headerLeadingButtons.length ? Children.toArray(headerLeadingButtons) : null;
-    ? (
-        <>
-          {headerLeadingButtons}
-        </>
-      )
-    : null;
 
   const resizeHandle = isSidebarVariant ? (
     <button

frontend/src/preview/PdfViewer.tsx

@@ -82,8 +82,8 @@ const resolvePdfWasmBaseUrl = (): string => {
 
 const PdfViewer = ({ src, title, className, viewportRef }: PdfViewerProps): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [viewportWidth, setViewportWidth] = useState(() => window.innerWidth);
+  const [viewportWidth, setViewportWidth] = useState(0);
-  const [viewportHeight, setViewportHeight] = useState(() => window.innerHeight);
+  const [viewportHeight, setViewportHeight] = useState(0);
   const [renderWidth, setRenderWidth] = useState(0);
   const [status, setStatus] = useState<RenderStatus>('idle');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);

frontend/src/styles/documents/viewer.css

@@ -455,8 +455,8 @@
   flex-direction: column;
   gap: var(--pdf-viewer-stack-padding, 0);
   align-items: center;
-  --pdf-viewer-viewport-width: 100vw;
+  --pdf-viewer-viewport-width: 100%;
-  --pdf-viewer-viewport-height: 100vh;
+  --pdf-viewer-viewport-height: 100%;
   padding: var(--pdf-viewer-stack-padding, 0);
   width: 100%;
   box-sizing: border-box;

frontend/src/styles/preview/preview-zoom.css

@@ -23,44 +23,45 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  max-width: 95vw;
+  max-width: 99vw;
-  max-height: 95vh;
+  max-height: 99vh;
   z-index: 3000000;
 }
 
 .preview-zoom__stage--pdf {
   width: 100%;
   height: 100%;
-  max-width: none;
+  max-width: 99vw;
-  max-height: none;
+  max-height: 99vh;
 }
 
 .preview-zoom__image {
-  max-width: 95vw;
+  max-width: 99vw;
-  max-height: 95vh;
+  max-height: 99vh;
   width: auto;
   height: auto;
+  box-shadow: 0 32px 120px var(--shadow-deep);
 }
 
 .preview-zoom__scroll {
   display: flex;
   align-items: center;
   justify-content: center;
-  max-width: 95vw;
+  max-width: 99vw;
-  max-height: 95vh;
+  max-height: 99vh;
 }
 
 .preview-zoom__scroll--pdf {
   width: 100%;
   height: 100%;
-  max-width: none;
+  max-width: 99vw;
-  max-height: none;
+  max-height: 99vh;
   padding: 0;
   box-sizing: border-box;
   overflow: auto;
   align-items: flex-start;
   justify-content: center;
-  --pdf-viewer-stack-padding: 2rem;
+  --pdf-viewer-stack-padding: 1vh;
 }
 
 .preview-zoom__scroll:focus {