kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
kolaente 2026-04-02 18:56:06 +02:00 committed by kolaente
parent a57cbd3e51
commit 48a91ce32c
1 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/home/ProjectsNavigationItem.vue
View File

@ -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;
}
}