From d1f0cee6eda6fad3d8bdaa35f00c432aa564f01a Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Wed, 16 Jul 2025 16:14:41 +0200
Subject: [PATCH] fix(files): drag ghost image

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 .../src/components/DragAndDropPreview.vue     | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/files/src/components/DragAndDropPreview.vue b/apps/files/src/components/DragAndDropPreview.vue
index efd281020ab..72fd98d43fb 100644
--- a/apps/files/src/components/DragAndDropPreview.vue
+++ b/apps/files/src/components/DragAndDropPreview.vue
@@ -92,7 +92,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss">
-$size: 24px;
+$size: 28px;
 $stack-shift: 6px;
 
 .files-list-drag-image {
@@ -102,24 +102,24 @@ $stack-shift: 6px;
 	display: flex;
 	overflow: hidden;
 	align-items: center;
-	height: 44px;
-	padding: 6px 12px;
+	height: $size + $stack-shift;
+	padding: $stack-shift $stack-shift * 2;
 	background: var(--color-main-background);
 
 	&__icon,
-	.files-list__row-icon {
+	.files-list__row-icon-preview-container {
 		display: flex;
 		overflow: hidden;
 		align-items: center;
 		justify-content: center;
-		width: $size;
-		height: $size;
+		width: $size - $stack-shift;
+		height: $size - $stack-shift;;
 		border-radius: var(--border-radius);
 	}
 
 	&__icon {
 		overflow: visible;
-		margin-inline-end: 12px;
+		margin-inline-end: $stack-shift * 2;
 
 		img {
 			max-width: 100%;
@@ -138,13 +138,15 @@ $stack-shift: 6px;
 			display: flex;
 
 			// Stack effect if more than one element
-			.files-list__row-icon + .files-list__row-icon {
+			// Max 3 elements
+			> .files-list__row-icon-preview-container + .files-list__row-icon-preview-container {
 				margin-top: $stack-shift;
-				margin-inline-start: $stack-shift - $size;
-				& + .files-list__row-icon {
+				margin-inline-start: $stack-shift * 2 - $size;
+				& + .files-list__row-icon-preview-container {
 					margin-top: $stack-shift * 2;
 				}
 			}
+
 			// If we have manually clone the preview,
 			// let's hide any fallback icons
 			&:not(:empty) + * {