fix(ui): improve network graph popup visibility (#3896)

src/views/Mesh.vue

@@ -77,6 +77,7 @@
 	max-height: 80vh;
 	overflow-y: scroll;
 	overflow-x: hidden;
+	cursor: move;
 }
 
 .details::-webkit-scrollbar {
@@ -113,6 +114,23 @@ export default {
 	},
 	methods: {
 		...mapActions(useBaseStore, ['showSnackbar', 'setNeighbors']),
+		setInitialPosition(element) {
+			const windowHeight = window.innerHeight
+			const windowWidth = window.innerWidth
+
+			const popupHeight = element.offsetHeight
+			const popupWidth = element.offsetWidth
+
+			// Set initial position (e.g., center of the window)
+			let initialTop = (windowHeight - popupHeight) / 2 - 50
+			let initialLeft = (windowWidth - popupWidth) / 10
+
+			if (initialTop < 0) initialTop = 10
+			if (initialLeft < 0) initialLeft = 10
+
+			element.style.top = initialTop + 'px'
+			element.style.left = initialLeft + 'px'
+		},
 		makeDivDraggable() {
 			const elmnt = document.getElementById('properties')
 
@@ -127,6 +145,10 @@ export default {
 
 			elmnt.setAttribute('data-draggable', true)
 
+			setTimeout(() => {
+				this.setInitialPosition(elmnt)
+			}, 100)
+
 			let startX = 0
 			let startY = 0