drag thumbs

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}>

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';

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%;