From 911cfa0b3806d61aa77aff2ad8493e6f97245519 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 11 Dec 2025 09:24:15 +0100
Subject: [PATCH 1/2] Fix deployment logs overlap with indicator and improve
 visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce deployment logs max-height from 40rem to 30rem to prevent overlap with deployments indicator
- Add conditional opacity (60%) to deployments indicator on deployment pages only (100% on other pages)
- Indicator becomes fully visible on hover or when expanded

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../livewire/deployments-indicator.blade.php  | 52 +++++++++++--------
 .../application/deployment/show.blade.php     |  2 +-
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/resources/views/livewire/deployments-indicator.blade.php b/resources/views/livewire/deployments-indicator.blade.php
index 746bc970c..9b71152af 100644
--- a/resources/views/livewire/deployments-indicator.blade.php
+++ b/resources/views/livewire/deployments-indicator.blade.php
@@ -1,16 +1,24 @@
 <div wire:poll.3000ms x-data="{
-    expanded: @entangle('expanded')
+    expanded: @entangle('expanded'),
+    isDeploymentPage: false,
+    checkPage() {
+        this.isDeploymentPage = window.location.pathname.includes('/deployment');
+    },
+    init() {
+        this.checkPage();
+        document.addEventListener('livewire:navigated', () => this.checkPage());
+    }
 }" class="fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4">
     @if ($this->deploymentCount > 0)
-        <div class="relative">
+        <div class="relative transition-opacity duration-200"
+            :class="{ 'opacity-100': expanded || !isDeploymentPage, 'opacity-60 hover:opacity-100': isDeploymentPage && !expanded }">
             <!-- Indicator Button -->
             <button @click="expanded = !expanded"
                 class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all duration-200 dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 hover:shadow-xl">
                 <!-- Animated spinner -->
-                <svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
-                        stroke-width="4"></circle>
+                <svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                     <path class="opacity-75" fill="currentColor"
                         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                     </path>
@@ -23,8 +31,8 @@ class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all dur
 
                 <!-- Expand/collapse icon -->
                 <svg class="w-4 h-4 transition-transform duration-200 dark:text-neutral-400 text-gray-600"
-                    :class="{ 'rotate-180': expanded }" xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor">
+                    :class="{ 'rotate-180': expanded }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                 </svg>
             </button>
@@ -32,9 +40,8 @@ class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all dur
             <!-- Expanded deployment list -->
             <div x-show="expanded" x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
-                x-transition:leave="transition ease-in duration-150"
-                x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2"
-                x-cloak
+                x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
+                x-transition:leave-end="opacity-0 translate-y-2" x-cloak
                 class="absolute bottom-full mb-2 w-80 max-h-96 overflow-y-auto rounded-lg shadow-xl dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200">
 
                 <div class="p-4 space-y-3">
@@ -46,16 +53,15 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
                                 @if ($deployment->status === 'in_progress')
                                     <svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin"
                                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                        <circle class="opacity-25" cx="12" cy="12" r="10"
-                                            stroke="currentColor" stroke-width="4"></circle>
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+                                        </circle>
                                         <path class="opacity-75" fill="currentColor"
                                             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                         </path>
                                     </svg>
                                 @else
-                                    <svg class="w-4 h-4 dark:text-neutral-400 text-gray-500"
-                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                        stroke="currentColor">
+                                    <svg class="w-4 h-4 dark:text-neutral-400 text-gray-500" xmlns="http://www.w3.org/2000/svg"
+                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                             d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                     </svg>
@@ -68,7 +74,8 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
                                     {{ $deployment->application_name }}
                                 </div>
                                 <p class="text-xs dark:text-neutral-400 text-gray-600 mt-1">
-                                    {{ $deployment->application?->environment?->project?->name }} / {{ $deployment->application?->environment?->name }}
+                                    {{ $deployment->application?->environment?->project?->name }} /
+                                    {{ $deployment->application?->environment?->name }}
                                 </p>
                                 <p class="text-xs dark:text-neutral-400 text-gray-600">
                                     {{ $deployment->server_name }}
@@ -78,11 +85,10 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
                                         PR #{{ $deployment->pull_request_id }}
                                     </p>
                                 @endif
-                                <p class="text-xs mt-1 capitalize"
-                                    :class="{
-                                        'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress',
-                                        'dark:text-neutral-400 text-gray-500': '{{ $deployment->status }}' === 'queued'
-                                    }">
+                                <p class="text-xs mt-1 capitalize" :class="{
+                                                'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress',
+                                                'dark:text-neutral-400 text-gray-500': '{{ $deployment->status }}' === 'queued'
+                                            }">
                                     {{ str_replace('_', ' ', $deployment->status) }}
                                 </p>
                             </div>
@@ -92,4 +98,4 @@ class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 tra
             </div>
         </div>
     @endif
-</div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/project/application/deployment/show.blade.php b/resources/views/livewire/project/application/deployment/show.blade.php
index e5d1ce8e6..9f428bfde 100644
--- a/resources/views/livewire/project/application/deployment/show.blade.php
+++ b/resources/views/livewire/project/application/deployment/show.blade.php
@@ -256,7 +256,7 @@ class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
                     </div>
                     <div id="logsContainer" @scroll="handleScroll"
                         class="flex flex-col overflow-y-auto p-2 px-4 min-h-4 scrollbar"
-                        :class="fullscreen ? 'flex-1' : 'max-h-[40rem]'">
+                        :class="fullscreen ? 'flex-1' : 'max-h-[30rem]'">
                         <div id="logs" class="flex flex-col font-mono">
                             <div x-show="searchQuery.trim() && getMatchCount() === 0"
                                 class="text-gray-500 dark:text-gray-400 py-2">

From c6a89087c52412d64679ba9c4ed4d0dee94c2948 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 11 Dec 2025 09:39:56 +0100
Subject: [PATCH 2/2] Refactor deployment indicator to use server-side route
 detection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace client-side JavaScript URL checking with Laravel's routeIs() for determining when to reduce indicator opacity. This simplifies the code and uses route names as the source of truth.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/Livewire/DeploymentsIndicator.php                 |  6 ++++++
 .../views/livewire/deployments-indicator.blade.php    | 11 ++---------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/Livewire/DeploymentsIndicator.php b/app/Livewire/DeploymentsIndicator.php
index 268aed152..5c945ac01 100644
--- a/app/Livewire/DeploymentsIndicator.php
+++ b/app/Livewire/DeploymentsIndicator.php
@@ -38,6 +38,12 @@ public function deploymentCount()
         return $this->deployments->count();
     }
 
+    #[Computed]
+    public function shouldReduceOpacity(): bool
+    {
+        return request()->routeIs('project.application.deployment.*');
+    }
+
     public function toggleExpanded()
     {
         $this->expanded = ! $this->expanded;
diff --git a/resources/views/livewire/deployments-indicator.blade.php b/resources/views/livewire/deployments-indicator.blade.php
index 9b71152af..2102004a1 100644
--- a/resources/views/livewire/deployments-indicator.blade.php
+++ b/resources/views/livewire/deployments-indicator.blade.php
@@ -1,17 +1,10 @@
 <div wire:poll.3000ms x-data="{
     expanded: @entangle('expanded'),
-    isDeploymentPage: false,
-    checkPage() {
-        this.isDeploymentPage = window.location.pathname.includes('/deployment');
-    },
-    init() {
-        this.checkPage();
-        document.addEventListener('livewire:navigated', () => this.checkPage());
-    }
+    reduceOpacity: @js($this->shouldReduceOpacity)
 }" class="fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4">
     @if ($this->deploymentCount > 0)
         <div class="relative transition-opacity duration-200"
-            :class="{ 'opacity-100': expanded || !isDeploymentPage, 'opacity-60 hover:opacity-100': isDeploymentPage && !expanded }">
+            :class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">
             <!-- Indicator Button -->
             <button @click="expanded = !expanded"
                 class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all duration-200 dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 hover:shadow-xl">