From a6da34740f8f092a9f80e0a7faf646ff1861601b Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Mon, 27 Oct 2025 21:20:54 +0100
Subject: [PATCH] drag thumbs

---
 frontend/src/documents/DocumentsTable.jsx | 19 ++++++++++++++
 frontend/src/index.jsx                    | 32 ++++++++++++++++-------
 frontend/src/styles.css                   |  7 +++++
 3 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/frontend/src/documents/DocumentsTable.jsx b/frontend/src/documents/DocumentsTable.jsx
index ababa22..00ea171 100644
--- a/frontend/src/documents/DocumentsTable.jsx
+++ b/frontend/src/documents/DocumentsTable.jsx
@@ -145,6 +145,25 @@ const DocumentThumbnailImage = ({
     innerClasses.push('document-thumbnail-inner--multipage');
   }
 
+  const aspectRatio = useMemo(() => {
+    if (Number.isFinite(assetWidth) && Number.isFinite(assetHeight) && assetWidth > 0 && assetHeight > 0) {
+      return assetWidth / assetHeight;
+    }
+    return null;
+  }, [assetWidth, assetHeight]);
+
+  useEffect(() => {
+    const node = visibilityRef.current;
+    if (!node) {
+      return;
+    }
+    if (aspectRatio) {
+      node.dataset.thumbnailAspect = String(aspectRatio);
+    } else {
+      delete node.dataset.thumbnailAspect;
+    }
+  }, [aspectRatio]);
+
   return (
     <div className="document-thumbnail-wrapper" ref={visibilityRef}>
       <div className={innerClasses.join(' ')} style={innerStyle}>
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 5c941c8..6694368 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -2765,18 +2765,32 @@ const AppLayout = () => {
             : null;
           const thumbnailEl = rowEl?.querySelector('.document-thumbnail');
           const placeholderEl = rowEl?.querySelector('.thumb-placeholder');
+          const wrapperEl = rowEl?.querySelector('.document-thumbnail-wrapper');
+          const aspectAttr = wrapperEl?.dataset?.thumbnailAspect;
+          const aspectRatio = aspectAttr ? parseFloat(aspectAttr) : null;
 
-          let content = null;
-          if (thumbnailEl instanceof HTMLImageElement) {
-            content = thumbnailEl.cloneNode(true);
-            content.draggable = false;
-            content.style.pointerEvents = 'none';
-          } else if (placeholderEl instanceof HTMLElement) {
-            content = placeholderEl.cloneNode(true);
-            content.style.pointerEvents = 'none';
+          let thumbWidth = size;
+          let thumbHeight = size;
+          if (Number.isFinite(aspectRatio) && aspectRatio > 0) {
+            if (aspectRatio >= 1) {
+              thumbWidth = size;
+              thumbHeight = Math.max(size / aspectRatio, size * 0.5);
+            } else {
+              thumbHeight = size;
+              thumbWidth = Math.max(size * aspectRatio, size * 0.5);
+            }
           }
+          layer.style.width = `${Math.round(thumbWidth)}px`;
+          layer.style.height = `${Math.round(thumbHeight)}px`;
 
-          if (content) {
+          const thumbSrc = thumbnailEl?.currentSrc || thumbnailEl?.src || null;
+
+          if (thumbSrc) {
+            layer.classList.add('document-drag-preview__thumb--image');
+            layer.style.backgroundImage = `url("${thumbSrc}")`;
+          } else if (placeholderEl instanceof HTMLElement) {
+            const content = placeholderEl.cloneNode(true);
+            content.style.pointerEvents = 'none';
             layer.appendChild(content);
           } else {
             layer.textContent = 'DOC';
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 72c41f5..fe93b5e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -598,6 +598,13 @@ button.danger:hover:not([disabled]) {
   transform-origin: center;
 }
 
+.document-drag-preview__thumb--image {
+  background-color: #000;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
 .document-drag-preview__thumb .document-thumbnail,
 .document-drag-preview__thumb img {
   width: 100%;