From c9f803fda3f1e9b498578737171b3d009ff67e31 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Mon, 8 Jul 2024 16:29:15 +0200
Subject: [PATCH] Popup menus: update fixed margins to relative untis (#4279)

---
 .../components/contextmenu/ContextMenu.svelte   | 17 ++++++++++++-----
 app/src/lib/navigation/ProjectsPopup.svelte     |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/src/lib/components/contextmenu/ContextMenu.svelte b/app/src/lib/components/contextmenu/ContextMenu.svelte
index e2a6d492e..1c8a7aa56 100644
--- a/app/src/lib/components/contextmenu/ContextMenu.svelte
+++ b/app/src/lib/components/contextmenu/ContextMenu.svelte
@@ -26,7 +26,6 @@
 	}: Props = $props();
 
 	// LOCAL VARS
-	let menuMargin = 4;
 
 	// STATES
 	let item = $state<any>();
@@ -70,12 +69,10 @@
 
 	function setVerticalAlign(targetBoundingRect: DOMRect) {
 		if (verticalAlign === 'top') {
-			return targetBoundingRect?.top ? targetBoundingRect.top - contextMenuHeight - menuMargin : 0;
+			return targetBoundingRect?.top ? targetBoundingRect.top - contextMenuHeight : 0;
 		}
 
-		return targetBoundingRect?.top
-			? targetBoundingRect.top + targetBoundingRect.height + menuMargin
-			: 0;
+		return targetBoundingRect?.top ? targetBoundingRect.top + targetBoundingRect.height : 0;
 	}
 
 	function setHorizontalAlign(targetBoundingRect: DOMRect) {
@@ -130,6 +127,8 @@
 		bind:offsetHeight={contextMenuHeight}
 		bind:offsetWidth={contextMenuWidth}
 		class="context-menu"
+		class:top-oriented={verticalAlign === 'top'}
+		class:bottom-oriented={verticalAlign === 'bottom'}
 		style:top="{menuPosition.y}px"
 		style:left="{menuPosition.x}px"
 		style:transform-origin={setTransformOrigin()}
@@ -166,6 +165,14 @@
 		/* background-color: rgba(0, 0, 0, 0.1); */
 	}
 
+	.top-oriented {
+		margin-top: -4px;
+	}
+
+	.bottom-oriented {
+		margin-top: 4px;
+	}
+
 	.context-menu {
 		z-index: var(--z-blocker);
 		position: fixed;
diff --git a/app/src/lib/navigation/ProjectsPopup.svelte b/app/src/lib/navigation/ProjectsPopup.svelte
index 06135900f..008eb07a8 100644
--- a/app/src/lib/navigation/ProjectsPopup.svelte
+++ b/app/src/lib/navigation/ProjectsPopup.svelte
@@ -151,7 +151,7 @@
 		position: absolute;
 		top: 100%;
 		z-index: var(--z-floating);
-		margin-top: 6px;
+		margin-top: 4px;
 		border-radius: var(--m, 6px);
 		border: 1px solid var(--clr-border-2);
 		background: var(--clr-bg-1);