From 727b951bbc2632af05d2b83a22b5a556db93ed6f Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Wed, 26 Mar 2025 14:59:28 +0100
Subject: [PATCH] update(Dashboard Grid): does not show the overlay when
 resizing the widget and adds different grid sizes for different viewports

---
 public/css/components/dashboard.css | 25 +++++++++++++++++++++++++
 public/js/components/Drop/Grid.js   | 11 +++++++----
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css
index eb0c2bf78..fb9a628de 100644
--- a/public/css/components/dashboard.css
+++ b/public/css/components/dashboard.css
@@ -23,6 +23,31 @@
 :root {
 	--fhc-dashboard-grid-size: 4;
 }
+
+@media(max-width: 1400px) {
+	:root {
+		--fhc-dashboard-grid-size: 4;
+	}
+}
+
+@media(max-width: 1200px) {
+	:root {
+		--fhc-dashboard-grid-size: 3;
+	}
+}
+
+@media(max-width: 992px) {
+	:root {
+		--fhc-dashboard-grid-size: 2;
+	}
+}
+
+@media(max-width: 768px) {
+	:root {
+		--fhc-dashboard-grid-size: 2;
+	}
+}
+
 @media(max-width: 577px) {
 	:root {
 		--fhc-dashboard-grid-size: 1;
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index baa8129cc..3a975d209 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -165,7 +165,8 @@ export default {
 			}
 		},
 		dragging(event){
-			this.toggleDraggedItemOverlay(true);
+			if(this.mode == MODE_MOVE)
+				this.toggleDraggedItemOverlay(true);
 			/*  use case: instead of showing the ghost widget when dragging, 
 				change the x and y position of the widget when dragging to drag the whole widget
 			event.target.style.top = `${this.clientY}px`;
@@ -271,7 +272,8 @@ export default {
 		},
 		_dragStart(evt) {
 			if (evt.dataTransfer) {
-				//evt.dataTransfer.setDragImage(evt.target, -99999, -99999);
+				if(this.mode == MODE_RESIZE)
+					evt.dataTransfer.setDragImage(evt.target, -99999, -99999);
 				evt.dataTransfer.dropEffect = 'move';
 				evt.dataTransfer.effectAllowed = 'move';
 			}
@@ -288,9 +290,9 @@ export default {
 		startResize(evt, item) {
 			if (!this.active)
 				return;
-			this._dragStart(evt);
 			this.mode = MODE_RESIZE;
 			this.draggedItem = item;
+			this._dragStart(evt);
 		},
 		dragOver(evt) {
 			if (!this.active)
@@ -338,7 +340,8 @@ export default {
 			this.draggedItem = null;
 		},
 		dragEnd() {
-			this.toggleDraggedItemOverlay(false);
+			if(this.mode == MODE_MOVE)
+				this.toggleDraggedItemOverlay(false);
 			if (this.mode == MODE_IDLE)
 				return;
 			if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)