From d4ae8b0f91457163c6cde152fed48f24a17ce527 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 14 Apr 2025 14:33:49 +0200
Subject: [PATCH] fix(Dashboard Grid Height): a bug was removed where the grid
 height was not correct when adding a new widget and the widget was not
 correctly displayed when adding a new widget

---
 public/js/components/Dashboard/Section.js |  2 +-
 public/js/components/Drop/Grid.js         | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index 1631cadcd..b14047148 100644
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -193,7 +193,7 @@ export default {
 		<drop-grid v-model:cols="gridWidth" :items="items" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @draggedItem="draggedItem=$event" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
 			<template #default="item">
 				<div v-if="item.placeholder" class="empty-tile-hover" @click="$emit('widgetAdd', name, { widget: 1, config: {}, place: {[gridWidth]: {x:item.x,y:item.y,w:1,h:1}}, custom: 1 })"></div>
-				<div v-else-if="item.blank || item.widgetid == draggedItem?.data.widgetid" :class="{'dashboard-item-overlay':item.resizeOverlay}" class="dashboard-item card overflow-hidden h-100 position-relative draggedItem" ></div>
+				<div v-else-if="item.blank || (item.widgetid && item.widgetid == draggedItem?.data.widgetid)" :class="{'dashboard-item-overlay':item.resizeOverlay}" class="dashboard-item card overflow-hidden h-100 position-relative draggedItem" ></div>
 				<dashboard-item 
 					v-else
 					:id="item.widget"
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index 4df29b8ba..d74211997 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -118,8 +118,9 @@ export default {
 			return [...this.placedItems, ...this.items_placeholders];
 		},
 		rows() {
-			if ((this.mode == MODE_MOVE || this.mode == MODE_RESIZE) && this.dragGrid)
+			if ((this.mode == MODE_MOVE || this.mode == MODE_RESIZE) && this.dragGrid){
 				return this.dragGrid.h;
+			}
 			return this.grid ? this.grid.h : 1;
 		},
 		gridStyle() {
@@ -171,7 +172,6 @@ export default {
 			let mappedPlacedItems= this.prePlacedItems.map(item => {
 				if (!this.positionUpdates[item.index] )
 					return item;
-				
 				let height_diff = this.positionUpdates[item.index]?.h - item.h;
 				let width_diff = this.positionUpdates[item.index]?.w - item.w;
 				return {
@@ -345,7 +345,10 @@ export default {
 				this.x = -1;
 				this.y = -1;
 				if (this.additionalRow !== null) {
-					this.grid.h = this.additionalRow;
+					let gridHeight = this.grid.getMaxY() + 1;
+					if(this.grid.h>gridHeight){
+						this.grid.h = gridHeight;
+					}
 					this.additionalRow = null;
 				}
 			}
@@ -376,11 +379,13 @@ export default {
 					this.additionalRow = this.grid.h;
 					this.grid.h += 1;
 				} else if (this.additionalRow !== null && gridY != this.rows - 1) {
-					this.grid.h = this.additionalRow;
+					let gridHeight = this.grid.getMaxY() + 1;
+					if(this.grid.h > gridHeight){
+						this.grid.h = gridHeight;
+					}
 					this.additionalRow = null;
 				}
 			}
-			
 			this.x = gridX;
 			this.y = gridY;