use css classes instead of temporary items

public/css/components/dashboard.css

@@ -130,10 +130,12 @@
 	display: none;
 }
 
+.drop-grid-item-sizechanged > .dashboard-item,
 .drop-grid-item-move > .dashboard-item {
 	background-color: var(--fhc-dashboard-item-overlay-background);
 }
 
+.drop-grid-item-sizechanged > .dashboard-item::before,
 .drop-grid-item-move > .dashboard-item::before {
 	position: absolute;
 	content: "";
@@ -145,6 +147,12 @@
 	opacity: .5;
 }
 
+.drop-grid-item-oversized > .dashboard-item {
+	/* Bootstrap: border-danger */
+	--bs-border-opacity: 1;
+	border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
+}
+
 #deleteBookmark i {
 	color: var(--fhc-dashboard-danger);
 }

public/js/components/Drop/Grid.js

@@ -137,9 +137,31 @@ export default {
 			return placeholders;
 		},
 		currentItems() {
-			if (this.mode != 1 && this.mode != 2 && this.active)
+			if (this.mode == MODE_IDLE && this.active)
 				return [ ...this.placedItems, ...this.items_placeholders ];
 
+			if (this.mode != MODE_IDLE && this.draggedItem) {
+				// add classes to dragged item
+				const draggedItemIndex = this.placedItems.findIndex(item => item.index == this.draggedItem.index);
+				const modifiedDraggedItem = {
+					...this.placedItems[draggedItemIndex],
+					classes: []
+				};
+
+				if (this.mode == MODE_MOVE) {
+					modifiedDraggedItem.classes.push('drop-grid-item-move');
+				}
+				if (this.mode == MODE_RESIZE) {
+					modifiedDraggedItem.classes.push('drop-grid-item-resize');
+					if (this.draggedItem.oversized)
+						modifiedDraggedItem.classes.push('drop-grid-item-oversized')
+					else if (this.placedItems[draggedItemIndex].resize)
+						modifiedDraggedItem.classes.push('drop-grid-item-sizechanged')
+				}
+
+				return this.placedItems.toSpliced(draggedItemIndex, 1, modifiedDraggedItem);
+			}
+
 			return this.placedItems;
 		},
 		rows() {
@@ -195,11 +217,10 @@ export default {
 		placedItems() {
 			if (!this.tempPositionUpdates)
 				return this.prePlacedItems;
-			let mappedPlacedItems= this.prePlacedItems.map(item => {
+			return this.prePlacedItems.map(item => {
-				if (!this.tempPositionUpdates[item.index] )
+				if (!this.tempPositionUpdates[item.index])
 					return item;
-				let height_diff = this.tempPositionUpdates[item.index]?.h - item.h;
+
-				let width_diff = this.tempPositionUpdates[item.index]?.w - item.w;
 				return {
 					resize: this.tempPositionUpdates[item.index]?.resize,
 					index: item.index,
@@ -207,26 +228,11 @@ export default {
 					data: item.data,
 					x: this.tempPositionUpdates[item.index].x === undefined ? item.x : this.tempPositionUpdates[item.index].x,
 					y: this.tempPositionUpdates[item.index].y === undefined ? item.y : this.tempPositionUpdates[item.index].y,
-					w: width_diff>0?item.w:this.tempPositionUpdates[item.index].w === undefined ? item.w : this.tempPositionUpdates[item.index].w,
+					w: this.tempPositionUpdates[item.index].w === undefined ? item.w : this.tempPositionUpdates[item.index].w,
-					h: height_diff > 0 ?item.h:this.tempPositionUpdates[item.index].h === undefined ? item.h : this.tempPositionUpdates[item.index].h
+					h: this.tempPositionUpdates[item.index].h === undefined ? item.h : this.tempPositionUpdates[item.index].h
 					
 				};
 			});
-
-			let temporaryResizeItems = [];
-			mappedPlacedItems.forEach(item=>{
-				if(item.resize){
-					let newItem = {
-						...item,
-						w:this.tempPositionUpdates[item.index].w === undefined ? item.w : this.tempPositionUpdates[item.index].w,
-						h:this.tempPositionUpdates[item.index].h === undefined ? item.h : this.tempPositionUpdates[item.index].h,
-						resizeOverlay:true,
-						blank:true,
-					};
-					temporaryResizeItems.push(newItem)
-				}
-			})
-			return [...mappedPlacedItems, ...temporaryResizeItems];
 		}
 	},
 	watch: {
@@ -474,15 +480,12 @@ export default {
 
 						[ w, h ] = this.cropSizeToAllowed(this.draggedItem.data.widget, w, h);
 
-						let draggedItemNode = document.getElementById(this.draggedItem.data.widgetid);
+						this.draggedItem.oversized = (w !== targetW || h !== targetH);
-						if (w !== targetW || h !== targetH) {
+
-							draggedItemNode.classList.add("border-danger");
+						if (this.draggedItem.oversized)
-						} else {
+							[ w, h ] = [ this.draggedItem.w, this.draggedItem.h ];
-							draggedItemNode.classList.remove("border-danger");
-						}
 
 						this.tempPositionUpdates = dragGrid.resize(this.draggedItem, w, h);
-						
 						break;
 					}
 				}
@@ -490,6 +493,8 @@ export default {
 		},
 		_cleanupDragging() {
 			if (this.draggedItem) {
+				const draggedItem = this.indexedItems.find(item => item.index == this.draggedItem.index);
+				delete draggedItem.classes;
 				this.draggedItem = null;
 			}
 		},
@@ -617,10 +622,7 @@ export default {
 				v-for="(item, index) in currentItems"
 				:key="item.data.id"
 				class="position-absolute"
-				:class="{
+				:class="item.classes"
-					'drop-grid-item-move': item.index == draggedItem?.index && mode == 1,
-					'drop-grid-item-resize': item.index == draggedItem?.index && mode == 2
-				}"
 				:item="item"
 				:style="{
 					zIndex: item.resizeOverlay ? 1 : 'auto',