fix offset values when dragging

Author: jrief

client/admin/FolderAdmin.tsx

@@ -86,9 +86,16 @@ export default function FolderAdmin() {
 					offsetX = (firstDraggedElement.getBoundingClientRect().left - activeDraggedElement.getBoundingClientRect().left) * zoomWhenDragging;
 					offsetY = (firstDraggedElement.getBoundingClientRect().top - activeDraggedElement.getBoundingClientRect().top) * zoomWhenDragging;
 				}
-			} else if (activeDraggedElement && ['tiles', 'mosaic'].includes(layout)) {
-				offsetX = -15;
-				offsetY = -15;
+			} else if (activeDraggedElement) {
+				if (layout === 'tiles') {
+					if (activeDraggedElement.querySelector('figure img')?.getAttribute('src').endsWith('svg')) {
+						offsetX = offsetY = -30;
+					} else {
+						offsetX = offsetY = -20;
+					}
+				} else if (layout === 'mosaic') {
+					offsetX = offsetY = -23;
+				}
 			}
 		}
 

client/scss/finder-admin.scss

@@ -313,7 +313,7 @@ ul.messagelist {
 		align-content: flex-start;
 		justify-content: flex-start;
 
-		li .inode {
+		> li .inode {
 			box-sizing: border-box;
 
 			div:has(> .figure-labels) {
@@ -342,18 +342,13 @@ ul.messagelist {
 					&:not([src$=".svg"]) {
 						box-shadow: $border-color 0 0 5px;
 					}
-
-					&[src$=".svg"] {
-						transform: scale(85%);
-					}
 				}
 				video {
 					border-radius: 5px;
 					box-shadow: $border-color 0 0 5px;
 				}
 
 				figcaption {
-					margin-top: 0.25rem;
 					text-align: center;
 					width: 100%;
 					word-break: break-all;
@@ -370,12 +365,17 @@ ul.messagelist {
 		gap: 5px;
 
 		li:not(.status) {
-			min-height: 250px;
-			width: 190px;
+			min-height: 248px;
+			width: 192px;
+			box-sizing: border-box;
 			cursor: pointer;
 			font-size: 15px;
 			line-height: 18px;
 
+			&:has(figure img[src$=".svg"]) {
+				padding: 15px;  // this reduced the size of SVG images
+			}
+
 			.inode .figure-labels {
 				inset: 5px;