From d96e253230968680df9ca61e511f6c4e596dd207 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Mon, 11 May 2026 16:25:15 +0200
Subject: [PATCH] fix(ui): align deployment indicator with collapsed sidebar

Move the deployments indicator inside the app layout state scope so it can react to the sidebar collapsed state, and add a layout test covering the responsive positioning.
---
 resources/views/components/navbar.blade.php    |  4 ++--
 resources/views/layouts/app.blade.php          |  2 +-
 .../livewire/deployments-indicator.blade.php   |  3 ++-
 .../Feature/DeploymentsIndicatorLayoutTest.php | 18 ++++++++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 tests/Feature/DeploymentsIndicatorLayoutTest.php

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 9e0e34b07..c5b076a71 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -92,7 +92,7 @@
                 }
             }
     }">
-    <div class="flex pt-4 pb-4 pl-2 items-start gap-2"
+    <div class="flex pt-4 pb-4 pl-2 items-start gap-2 motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none"
         :class="collapsed ? 'lg:flex-col lg:items-center lg:pl-0 lg:gap-3 lg:pt-8' : 'lg:pt-6'">
         <div class="flex flex-col w-full" :class="collapsed && 'lg:hidden'">
             <a href="/" {{ wireNavigate() }} class="text-2xl font-bold tracking-tight dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
@@ -124,7 +124,7 @@ class="px-1 py-0.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400
             <livewire:settings-dropdown />
         </div>
     </div>
-    <div class="px-2 pt-2 pb-7" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-4 lg:flex lg:justify-center'">
+    <div class="px-2 pt-2 pb-7 overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-0 lg:min-h-[4.5rem] lg:flex lg:justify-center'">
         <livewire:switch-team />
     </div>
     <ul role="list" class="flex flex-col flex-1 gap-y-7">
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 04cda7d63..f4424cada 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -7,7 +7,6 @@
     <!-- Global search component - included once to prevent keyboard shortcut duplication -->
     <livewire:global-search />
     @auth
-        <livewire:deployments-indicator />
         <div x-data="{
             open: false,
             collapsed: false,
@@ -26,6 +25,7 @@
             }
         }" x-cloak class="mx-auto dark:text-inherit text-black"
             :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
+            <livewire:deployments-indicator />
             <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
                 <div class="fixed inset-y-0 right-0 h-full flex">
diff --git a/resources/views/livewire/deployments-indicator.blade.php b/resources/views/livewire/deployments-indicator.blade.php
index 86378d46c..9f2c59820 100644
--- a/resources/views/livewire/deployments-indicator.blade.php
+++ b/resources/views/livewire/deployments-indicator.blade.php
@@ -1,7 +1,8 @@
 <div wire:poll.3000ms x-data="{
     expanded: @entangle('expanded'),
     reduceOpacity: @js($this->shouldReduceOpacity)
-}" class="fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4">
+}" class="fixed bottom-0 left-0 z-60 mb-4 ml-4 transition-[left] duration-200"
+    :class="collapsed ? 'lg:left-16' : 'lg:left-56'">
     @if ($this->deploymentCount > 0)
         <div class="relative transition-opacity duration-200"
             :class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">
diff --git a/tests/Feature/DeploymentsIndicatorLayoutTest.php b/tests/Feature/DeploymentsIndicatorLayoutTest.php
new file mode 100644
index 000000000..84659ec3e
--- /dev/null
+++ b/tests/Feature/DeploymentsIndicatorLayoutTest.php
@@ -0,0 +1,18 @@
+<?php
+
+it('positions the deployments indicator from the sidebar collapsed state', function () {
+    $indicatorView = file_get_contents(resource_path('views/livewire/deployments-indicator.blade.php'));
+    $layoutView = file_get_contents(resource_path('views/layouts/app.blade.php'));
+
+    expect($indicatorView)
+        ->toContain('transition-[left] duration-200')
+        ->toContain(":class=\"collapsed ? 'lg:left-16' : 'lg:left-56'\"")
+        ->not->toContain('fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4');
+
+    expect($layoutView)
+        ->toContain('<div x-data="{')
+        ->toContain('<livewire:deployments-indicator />');
+
+    expect(strpos($layoutView, '<div x-data="{'))
+        ->toBeLessThan(strpos($layoutView, '<livewire:deployments-indicator />'));
+});