drag thumbs

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