From e46f46c95bc41204e44d62010daf23cc10fe957e Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Thu, 14 Aug 2025 15:07:38 +0200
Subject: [PATCH] update(Dashboard grid): doesnt allow the user to drag a
 widget outside of the grid boundaries

---
 public/js/components/DashboardWidget/Url.js |  2 +-
 public/js/components/Drop/Grid.js           | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/public/js/components/DashboardWidget/Url.js b/public/js/components/DashboardWidget/Url.js
index 2763862a9..16eacab90 100644
--- a/public/js/components/DashboardWidget/Url.js
+++ b/public/js/components/DashboardWidget/Url.js
@@ -159,7 +159,7 @@ export default {
 		// this.$emit('setConfig', true); -> use this to enable widget config mode if needed
 	},
 	template: /*html*/ `
-    <div class="widgets-url w-100 h-100 overflow-scroll" style="padding: 1rem 1rem;">
+    <div class="widgets-url w-100 h-100 overflow-auto" style="padding: 1rem 1rem;">
         <div class="d-flex flex-column justify-content-between">
         	<button class="btn btn-outline-secondary btn-sm w-100 mt-2 card" @click="openCreateModal" type="button">{{$p.t('bookmark','newLink')}}</button>
 
diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index cfe5747d4..d11e4c249 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -274,8 +274,23 @@ export default {
 		dragging(event){
 			if(this.mode == MODE_MOVE){
 				this.toggleDraggedItemOverlay(true);
-				this.clonedWidget.style.top = `${this.clientY-20}px`;
-				this.clonedWidget.style.left = `${this.clientX-15}px`;
+				
+				const containerRect = this.$refs.container.getBoundingClientRect();
+				const clonedWidgetRect = this.clonedWidget.getBoundingClientRect();
+				
+				let desiredTop = this.clientY - 20;
+				let desiredLeft = this.clientX - 15;
+				
+				const minTop = 0;
+				const maxTop = containerRect.height - clonedWidgetRect.height;
+				const minLeft = 0;
+				const maxLeft = containerRect.width - clonedWidgetRect.width;
+				
+				const constrainedTop = Math.max(minTop, Math.min(maxTop, desiredTop));
+				const constrainedLeft = Math.max(minLeft, Math.min(maxLeft, desiredLeft));
+				
+				this.clonedWidget.style.top = `${constrainedTop}px`;
+				this.clonedWidget.style.left = `${constrainedLeft}px`;
 			}
 		},
 		createNewGrid(items) {
@@ -413,6 +428,7 @@ export default {
 			setTimeout(() => {
 				this.draggedNode = evt.target.closest(".drop-grid-item");
 				//clones the widget for the drag Image
+				
 				let clone = evt.target.closest(".drop-grid-item")?.cloneNode(true);
 
 				clone.style.zIndex = 5;