fix(files): drag ghost imagefeat/files-row-height

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

1 files 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) + * {