fix(ui): show one resource status badge and anchor the Links menu to its button

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
2026-10-24 22:27:27 +02:00
co-authored by Claude Opus 5.5
parent 491f1179ce
commit 228f0d1704
3 changed files with 25 additions and 26 deletions
@@ -13,13 +13,9 @@
$linkItemClasses = 'listbox-option justify-start! gap-2.5!';
@endphp
<div @class([
'relative' => !$compact,
'static' => $compact,
'w-full' => $fullWidth,
]) x-data="{ open: false }"
<div @class(['relative', 'w-full' => $fullWidth]) x-data="{ open: false }"
x-effect="$dispatch('resource-actions-toggled', { open })" @keydown.escape.window="open = false">
<button type="button" @click="open = !open" @click.outside="open = false" title="Open application links"
<button type="button" x-ref="trigger" @click="open = !open" @click.outside="open = false" title="Open application links"
@class([
'app-tab shrink-0 gap-1' => !$fullWidth && !$compact,
'button w-full justify-between' => $fullWidth,
@@ -36,10 +32,12 @@
</span>
</button>
<div x-show="open" x-cloak x-transition.origin.top.right role="menu"
@if ($compact) x-anchor.bottom-start.fixed.offset.4="$refs.trigger" @endif
@class([
'listbox-panel top-full! mt-1!',
'listbox-panel',
'top-full! mt-1!' => !$compact,
'left-0! right-0! w-full! min-w-0! max-w-none!' => $fullWidth,
'left-1/2! right-auto! w-[calc(100vw-2rem)]! max-w-md! min-w-0! -translate-x-1/2' => $compact,
'w-max! min-w-60! max-w-[min(28rem,calc(100vw-2rem))]!' => $compact,
'right-0! left-auto! min-w-60! max-w-96!' => !$fullWidth && !$compact,
])>
@if ($hasLinks)
@@ -2,13 +2,9 @@
$linkItemClasses = 'listbox-option justify-start! gap-2.5!';
@endphp
<div @class([
'relative' => !$compact,
'static' => $compact,
'w-full' => $fullWidth,
]) x-data="{ open: false }"
<div @class(['relative', 'w-full' => $fullWidth]) x-data="{ open: false }"
x-effect="$dispatch('resource-actions-toggled', { open })" @keydown.escape.window="open = false">
<button type="button" @click="open = !open" @click.outside="open = false" title="Open service links"
<button type="button" x-ref="trigger" @click="open = !open" @click.outside="open = false" title="Open service links"
@class([
'app-tab shrink-0 gap-1' => !$fullWidth && !$compact,
'button w-full justify-between' => $fullWidth,
@@ -25,10 +21,12 @@
</span>
</button>
<div x-show="open" x-cloak x-transition.origin.top.right role="menu"
@if ($compact) x-anchor.bottom-start.fixed.offset.4="$refs.trigger" @endif
@class([
'listbox-panel top-full! mt-1! max-h-80! overflow-y-auto!',
'listbox-panel max-h-80! overflow-y-auto!',
'top-full! mt-1!' => !$compact,
'left-0! right-0! w-full! min-w-0! max-w-none!' => $fullWidth,
'left-1/2! right-auto! w-[calc(100vw-2rem)]! max-w-md! min-w-0! -translate-x-1/2' => $compact,
'w-max! min-w-60! max-w-[min(28rem,calc(100vw-2rem))]!' => $compact,
'right-0! left-auto! min-w-60! max-w-96!' => !$fullWidth && !$compact,
])>
@forelse ($links as $link)
@@ -259,16 +259,19 @@
@if ($currentResource)
<x-breadcrumb-switcher title="Resources" :label="$currentResource->name" :items="$resourceItems">
<x-slot:meta>
@if ($currentApplication)
<livewire:project.application.status :application="$currentApplication"
:wire:key="'application-status-'.$currentApplication->uuid" />
@elseif ($currentDatabase)
<livewire:project.database.status :database="$currentDatabase"
:wire:key="'database-status-'.$currentDatabase->uuid" />
@else
<livewire:project.service.status :service="$currentService"
:wire:key="'service-status-'.$currentService->uuid" />
@endif
{{-- Below xl, the page heading shows the status. --}}
<div class="hidden xl:flex">
@if ($currentApplication)
<livewire:project.application.status :application="$currentApplication"
:wire:key="'application-status-'.$currentApplication->uuid" />
@elseif ($currentDatabase)
<livewire:project.database.status :database="$currentDatabase"
:wire:key="'database-status-'.$currentDatabase->uuid" />
@else
<livewire:project.service.status :service="$currentService"
:wire:key="'service-status-'.$currentService->uuid" />
@endif
</div>
</x-slot:meta>
</x-breadcrumb-switcher>
@endif