From 254b0a15e36f999af7b03b77ebcc297b484ad673 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 16 Dec 2025 15:01:53 +0100
Subject: [PATCH] Fix dropdown positioning by adjusting offsets for scrollable
 containers

---
 .../views/components/resources/breadcrumbs.blade.php   | 10 +++++-----
 .../views/livewire/project/resource/index.blade.php    | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/resources/views/components/resources/breadcrumbs.blade.php b/resources/views/components/resources/breadcrumbs.blade.php
index 5e1cabe03..1d6bc169d 100644
--- a/resources/views/components/resources/breadcrumbs.blade.php
+++ b/resources/views/components/resources/breadcrumbs.blade.php
@@ -91,7 +91,7 @@ class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 bor
                                         ),
                                     );
                             @endphp
-                            <div @mouseenter="openEnv('{{ $environment->uuid }}'); envPositions['{{ $environment->uuid }}'] = $el.offsetTop"
+                            <div @mouseenter="openEnv('{{ $environment->uuid }}'); envPositions['{{ $environment->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                 @mouseleave="closeEnv()">
                                 <a href="{{ route('project.resource.index', [
                                     'environment_uuid' => $environment->uuid,
@@ -176,7 +176,7 @@ class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 bor
                                             $resHasMultipleServers = $resType === 'application' && method_exists($res, 'additional_servers') && $res->additional_servers()->count() > 0;
                                             $resServerName = $resHasMultipleServers ? null : data_get($res, 'destination.server.name');
                                         @endphp
-                                        <div @mouseenter="openRes('{{ $environment->uuid }}-{{ $res->uuid }}'); resPositions['{{ $environment->uuid }}-{{ $res->uuid }}'] = $el.offsetTop"
+                                        <div @mouseenter="openRes('{{ $environment->uuid }}-{{ $res->uuid }}'); resPositions['{{ $environment->uuid }}-{{ $res->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                             @mouseleave="closeRes()">
                                             <a href="{{ $resRoute }}"
                                                 class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $isCurrentResource ? 'dark:text-warning font-semibold' : '' }}"
@@ -221,7 +221,7 @@ class="flex flex-col sm:flex-row items-start pl-1">
                                         <div
                                             class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200">
                                             @if ($resType === 'application')
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop"
+                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                                     @mouseleave="closeMenu()">
                                                     <a href="{{ route('project.application.configuration', $resParams) }}"
                                                         class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
@@ -242,7 +242,7 @@ class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
                                                         class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
                                                 @endcan
                                             @elseif ($resType === 'service')
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop"
+                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                                     @mouseleave="closeMenu()">
                                                     <a href="{{ route('project.service.configuration', $resParams) }}"
                                                         class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
@@ -261,7 +261,7 @@ class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
                                                         class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
                                                 @endcan
                                             @else
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop"
+                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                                     @mouseleave="closeMenu()">
                                                     <a href="{{ route('project.database.configuration', $resParams) }}"
                                                         class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
diff --git a/resources/views/livewire/project/resource/index.blade.php b/resources/views/livewire/project/resource/index.blade.php
index 39304253b..575a944b0 100644
--- a/resources/views/livewire/project/resource/index.blade.php
+++ b/resources/views/livewire/project/resource/index.blade.php
@@ -92,7 +92,7 @@ class="absolute z-20 top-full mt-1 left-0 sm:left-auto max-w-[calc(100vw-1rem)]"
                                             ->merge($env->databases()->map(fn($db) => ['type' => 'database', 'resource' => $db]))
                                             ->merge($env->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]));
                                     @endphp
-                                    <div @mouseenter="openEnv('{{ $env->uuid }}'); envPositions['{{ $env->uuid }}'] = $el.offsetTop" @mouseleave="closeEnv()">
+                                    <div @mouseenter="openEnv('{{ $env->uuid }}'); envPositions['{{ $env->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)" @mouseleave="closeEnv()">
                                         <a href="{{ route('project.resource.index', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => $env->uuid]) }}"
                                             class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $env->uuid === $environment->uuid ? 'dark:text-warning font-semibold' : '' }}"
                                             title="{{ $env->name }}">
@@ -158,7 +158,7 @@ class="flex flex-col sm:flex-row items-start pl-1">
                                                     $resHasMultipleServers = $resType === 'application' && method_exists($res, 'additional_servers') && $res->additional_servers()->count() > 0;
                                                     $resServerName = $resHasMultipleServers ? null : data_get($res, 'destination.server.name');
                                                 @endphp
-                                                <div @mouseenter="openRes('{{ $env->uuid }}-{{ $res->uuid }}'); resPositions['{{ $env->uuid }}-{{ $res->uuid }}'] = $el.offsetTop" @mouseleave="closeRes()">
+                                                <div @mouseenter="openRes('{{ $env->uuid }}-{{ $res->uuid }}'); resPositions['{{ $env->uuid }}-{{ $res->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)" @mouseleave="closeRes()">
                                                     <a href="{{ $resRoute }}"
                                                         class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200"
                                                         title="{{ $res->name }}{{ $resServerName ? ' ('.$resServerName.')' : '' }}">
@@ -198,7 +198,7 @@ class="flex flex-col sm:flex-row items-start pl-1">
                                                 <!-- Main Menu List -->
                                                 <div class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200">
                                                     @if ($resType === 'application')
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop" @mouseleave="closeMenu()">
+                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)" @mouseleave="closeMenu()">
                                                             <a href="{{ route('project.application.configuration', $resParams) }}"
                                                                 class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
                                                                 <span>Configuration</span>
@@ -213,7 +213,7 @@ class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutra
                                                             <a href="{{ route('project.application.command', $resParams) }}" class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
                                                         @endcan
                                                     @elseif ($resType === 'service')
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop" @mouseleave="closeMenu()">
+                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)" @mouseleave="closeMenu()">
                                                             <a href="{{ route('project.service.configuration', $resParams) }}"
                                                                 class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
                                                                 <span>Configuration</span>
@@ -227,7 +227,7 @@ class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutra
                                                             <a href="{{ route('project.service.command', $resParams) }}" class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
                                                         @endcan
                                                     @else
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop" @mouseleave="closeMenu()">
+                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)" @mouseleave="closeMenu()">
                                                             <a href="{{ route('project.database.configuration', $resParams) }}"
                                                                 class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
                                                                 <span>Configuration</span>