From 132d9e3d02c344c14f8a3810391ba6702ec6b3a7 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sat, 22 Nov 2025 02:41:14 +0100
Subject: [PATCH] fix

---
 frontend/src/detail/PreviewZoomOverlay.tsx   | 39 ++++++++++----------
 frontend/src/preview/DocumentViewerPanel.tsx |  9 +----
 frontend/src/preview/PdfViewer.tsx           |  4 +-
 frontend/src/styles/documents/viewer.css     |  4 +-
 frontend/src/styles/preview/preview-zoom.css | 23 ++++++------
 5 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/frontend/src/detail/PreviewZoomOverlay.tsx b/frontend/src/detail/PreviewZoomOverlay.tsx
index e7db638..010b3be 100644
--- a/frontend/src/detail/PreviewZoomOverlay.tsx
+++ b/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;
-      if (target instanceof HTMLElement) {
-        const tag = target.tagName ? target.tagName.toLowerCase() : '';
-        if (
-          target.isContentEditable
-          || tag === 'input'
-          || tag === 'textarea'
-          || tag === 'select'
-        ) {
-          return;
-        }
+    const target = event.target;
+    if (target instanceof HTMLElement) {
+      const tag = target.tagName ? target.tagName.toLowerCase() : '';
+      if (
+        target.isContentEditable
+        || tag === 'input'
+        || tag === 'textarea'
+        || tag === 'select'
+      ) {
+        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) => {
-            if (event.target === event.currentTarget) {
-              onClose();
-            }
-          }}
+        onClick={(event) => {
+          if (event.target === event.currentTarget) {
+            onClose();
+          }
+        }}
         >
           <div
             className={containerClassName}
diff --git a/frontend/src/preview/DocumentViewerPanel.tsx b/frontend/src/preview/DocumentViewerPanel.tsx
index 6ee8cf8..8934803 100644
--- a/frontend/src/preview/DocumentViewerPanel.tsx
+++ b/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
-    ? (
-        <>
-          {headerLeadingButtons}
-        </>
-      )
-    : null;
+  const headerLeadingContent = headerLeadingButtons.length ? Children.toArray(headerLeadingButtons) : null;
 
   const resizeHandle = isSidebarVariant ? (
     <button
diff --git a/frontend/src/preview/PdfViewer.tsx b/frontend/src/preview/PdfViewer.tsx
index 6d521f8..df39cc2 100644
--- a/frontend/src/preview/PdfViewer.tsx
+++ b/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 [viewportHeight, setViewportHeight] = useState(() => window.innerHeight);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
   const [renderWidth, setRenderWidth] = useState(0);
   const [status, setStatus] = useState<RenderStatus>('idle');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
diff --git a/frontend/src/styles/documents/viewer.css b/frontend/src/styles/documents/viewer.css
index b0ff014..8985453 100644
--- a/frontend/src/styles/documents/viewer.css
+++ b/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-height: 100vh;
+  --pdf-viewer-viewport-width: 100%;
+  --pdf-viewer-viewport-height: 100%;
   padding: var(--pdf-viewer-stack-padding, 0);
   width: 100%;
   box-sizing: border-box;
diff --git a/frontend/src/styles/preview/preview-zoom.css b/frontend/src/styles/preview/preview-zoom.css
index d32580b..cb073e1 100644
--- a/frontend/src/styles/preview/preview-zoom.css
+++ b/frontend/src/styles/preview/preview-zoom.css
@@ -23,44 +23,45 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  max-width: 95vw;
-  max-height: 95vh;
+  max-width: 99vw;
+  max-height: 99vh;
   z-index: 3000000;
 }
 
 .preview-zoom__stage--pdf {
   width: 100%;
   height: 100%;
-  max-width: none;
-  max-height: none;
+  max-width: 99vw;
+  max-height: 99vh;
 }
 
 .preview-zoom__image {
-  max-width: 95vw;
-  max-height: 95vh;
+  max-width: 99vw;
+  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-height: 95vh;
+  max-width: 99vw;
+  max-height: 99vh;
 }
 
 .preview-zoom__scroll--pdf {
   width: 100%;
   height: 100%;
-  max-width: none;
-  max-height: none;
+  max-width: 99vw;
+  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 {