From 228f0d17049eb7234c322de0994f46d190daebd7 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sat, 24 Oct 2026 22:27:27 +0200
Subject: [PATCH] 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>
---
 .../components/applications/links.blade.php   | 14 +++++------
 .../views/components/services/links.blade.php | 14 +++++------
 .../views/components/top-breadcrumb.blade.php | 23 +++++++++++--------
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/resources/views/components/applications/links.blade.php b/resources/views/components/applications/links.blade.php
index 941700d948..9e6ec347b7 100644
--- a/resources/views/components/applications/links.blade.php
+++ b/resources/views/components/applications/links.blade.php
@@ -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)
diff --git a/resources/views/components/services/links.blade.php b/resources/views/components/services/links.blade.php
index 32de3af618..192363dbac 100644
--- a/resources/views/components/services/links.blade.php
+++ b/resources/views/components/services/links.blade.php
@@ -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)
diff --git a/resources/views/components/top-breadcrumb.blade.php b/resources/views/components/top-breadcrumb.blade.php
index 83058bb64b..64bebc9381 100644
--- a/resources/views/components/top-breadcrumb.blade.php
+++ b/resources/views/components/top-breadcrumb.blade.php
@@ -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