From 48a91ce32c575932a396d44dade0852399ea352e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 2 Apr 2026 18:56:06 +0200
Subject: [PATCH] fix(frontend): prevent drag handle from overlapping project
 color in sidebar

Moves the drag handle inside the color-bubble-wrapper so both elements
share the same positioned container, eliminating the absolute positioning
mismatch that caused the overlap. Fixes #2493.
---
 .../home/ProjectsNavigationItem.vue           | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index 4ab91f86f..d660284ea 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -18,15 +18,6 @@
 					:class="{ 'project-is-collapsed': !childProjectsOpen }"
 				/>
 			</BaseButton>
-			<span
-				v-if="canEditOrder && project.id > 0 && project.maxPermission !== null && project.maxPermission > PERMISSIONS.READ"
-				class="icon menu-item-icon handle drag-handle-standalone"
-				@mousedown.stop
-				@click.stop.prevent
-				@touchstart.stop
-			>
-				<Icon icon="grip-lines" />
-			</span>
 			<BaseButton
 				:to="{ name: 'project.index', params: { projectId: project.id} }"
 				class="list-menu-link"
@@ -48,6 +39,15 @@
 					>
 						<Icon icon="filter" />
 					</span>
+					<span
+						v-if="canEditOrder && project.id > 0 && project.maxPermission !== null && project.maxPermission > PERMISSIONS.READ"
+						class="icon menu-item-icon handle drag-handle"
+						@mousedown.stop
+						@click.stop.prevent
+						@touchstart.stop
+					>
+						<Icon icon="grip-lines" />
+					</span>
 				</div>
 				<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
 			</BaseButton>
@@ -221,7 +221,7 @@ const canToggleFavorite = computed(() => {
 	opacity: 1;
 }
 
-.list-menu:hover > div > .drag-handle-standalone {
+.list-menu:hover .color-bubble-wrapper > .drag-handle {
 	opacity: 1;
 }
 
@@ -252,16 +252,15 @@ const canToggleFavorite = computed(() => {
 	}
 }
 
-.drag-handle-standalone {
-	inline-size: 1rem;
-	block-size: 1rem;
+.drag-handle {
 	opacity: 0;
 	cursor: grab;
 	transition: opacity $transition;
-	z-index: 2;
-
 	position: absolute;
-	inset-inline-start: 2.15rem;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
 	&:active {
 		cursor: grabbing;
@@ -279,7 +278,7 @@ const canToggleFavorite = computed(() => {
 }
 
 @media (pointer: coarse) {
-	.drag-handle-standalone {
+	.drag-handle {
 		display: none !important;
 	}
 }