diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js
index 31b8a5085..deb55ed2b 100644
--- a/public/js/components/Dashboard/Item.js
+++ b/public/js/components/Dashboard/Item.js
@@ -19,7 +19,9 @@ export default {
 		"change",
 		"remove",
 		"dragstart",
-		"resizestart"
+		"resizestart",
+		"configOpened",
+		"configClosed"
 	],
 	props: [
 		"id",
@@ -41,6 +43,12 @@ export default {
 		},
 	},
 	methods: {
+		handleShowBsModal() {
+			this.$emit('configOpened')
+		},
+		handleHideBsModal() {
+			this.$emit('configClosed')
+		},
 		mouseDown(e) {
 			this.target = e.target;
 		},
@@ -120,7 +128,7 @@ export default {
 		<component :is="component" v-model:shared-data="sharedData" :config="arguments" :width="width" :height="height" @setConfig="setConfig" @change="changeConfigManually"></component>
 		</div>
 		<div v-else class="card-body overflow-hidden text-center d-flex flex-column justify-content-center"><i class="fa-solid fa-spinner fa-pulse fa-3x"></i></div>
-		<bs-modal v-if="hasConfig" ref="config">
+		<bs-modal v-if="hasConfig" ref="config" @hideBsModal="handleHideBsModal" @showBsModal="handleShowBsModal">
 			<template v-slot:title>
 				{{ widget ? 'Config for ' + widget.setup.name : '' }}
 			</template>
diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index c6769a373..3fbc40af6 100644
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -26,6 +26,7 @@ export default {
 	],
 	data() {
 		return {
+			configOpened: false,
 			gridWidth: 1,
 			gridHeight: null,
 			editMode: this.adminMode
@@ -91,6 +92,12 @@ export default {
 		},
 	},
 	methods: {
+		handleConfigOpened() {
+			this.configOpened = true
+		},
+		handleConfigClosed() {
+			this.configOpened = false
+		},
 		checkResizeLimit(item, w, h) {
 			// NOTE(chris): widgets needs to be loaded for this to work
 			let widget = CachedWidgetLoader.getWidget(item.widget);
@@ -180,7 +187,7 @@ export default {
 			<span >{{$p.t('ui/section' + name)}}</span>
 			<button style="margin-left: 8px;" class="btn" @click="editMode = !editMode"><i class="fa-solid fa-gear"></i></button>
 		</h3>
-		<drop-grid v-model:cols="gridWidth" :items="items" :placeholders="items_placeholders" :active="editMode" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
+		<drop-grid v-model:cols="gridWidth" :items="items" :placeholders="items_placeholders" :active="editMode && !configOpened" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
 			<template #default="item" #default>
 				
 				<dashboard-item v-if="!item.placeholder"
@@ -193,7 +200,9 @@ export default {
 					:hidden="item.hidden"
 					:editMode="editMode"
 					@change="saveConfig($event, item)"
-					@remove="removeWidget(item, $event)">
+					@remove="removeWidget(item, $event)"
+					@config-opened="handleConfigOpened"
+					@config-closed="handleConfigClosed">
 				</dashboard-item>
 				<div v-else 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>