From 5cc822c9963312dd9f7bd3f5ba8b7a45d5e771e2 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Mon, 15 Dec 2025 10:52:00 +0100
Subject: [PATCH] Fix text selection issue in runtime logs view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the same selection preservation fix to the runtime logs component
(get-logs.blade.php) that was applied to deployment logs:
- Add hasActiveLogSelection() helper to detect active text selection
- Skip re-render when user has text selected (preserves copy ability)
- Add renderTrigger mechanism to ensure filtering works after refresh
- Use x-effect for hidden state to properly react to Livewire updates

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../project/shared/get-logs.blade.php         | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index 8504a160f..692138c5b 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -9,6 +9,7 @@
         scrollDebounce: null,
         colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
         searchQuery: '',
+        renderTrigger: 0,
         containerName: '{{ $container ?? "logs" }}',
         makeFullscreen() {
             this.fullscreen = !this.fullscreen;
@@ -80,6 +81,18 @@
             if (!this.searchQuery.trim()) return true;
             return line.toLowerCase().includes(this.searchQuery.toLowerCase());
         },
+        hasActiveLogSelection() {
+            const selection = window.getSelection();
+            if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+                return false;
+            }
+            const logsContainer = document.getElementById('logs');
+            if (!logsContainer) return false;
+
+            // Check if selection is within the logs container
+            const range = selection.getRangeAt(0);
+            return logsContainer.contains(range.commonAncestorContainer);
+        },
         decodeHtml(text) {
             // Decode HTML entities, handling double-encoding with max iteration limit to prevent DoS
             let decoded = text;
@@ -96,6 +109,12 @@
             return decoded;
         },
         renderHighlightedLog(el, text) {
+            // Skip re-render if user has text selected in logs (preserves copy ability)
+            // But always render if the element is empty (initial render)
+            if (el.textContent && this.hasActiveLogSelection()) {
+                return;
+            }
+
             const decoded = this.decodeHtml(text);
             el.textContent = '';
 
@@ -167,6 +186,12 @@
                 this.$wire.getLogs(true);
                 this.logsLoaded = true;
             }
+            // Re-render logs after Livewire updates
+            Livewire.hook('commit', ({ succeed }) => {
+                succeed(() => {
+                    this.$nextTick(() => { this.renderTrigger++; });
+                });
+            });
         }
     }">
         @if ($collapsible)
@@ -350,8 +375,8 @@ class="text-gray-500 dark:text-gray-400 py-2">
 
                                 @endphp
                                 <div data-log-line data-log-content="{{ $line }}"
+                                    x-effect="renderTrigger; searchQuery; $el.classList.toggle('hidden', !matchesSearch($el.dataset.logContent))"
                                     x-bind:class="{
-                                        'hidden': !matchesSearch($el.dataset.logContent),
                                         'bg-red-500/10 dark:bg-red-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'error',
                                         'bg-yellow-500/10 dark:bg-yellow-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'warning',
                                         'bg-purple-500/10 dark:bg-purple-500/15': colorLogs && getLogLevel($el.dataset.logContent) === 'debug',
@@ -362,7 +387,7 @@ class="flex gap-2">
                                         <span class="shrink-0 text-gray-500">{{ $timestamp }}</span>
                                     @endif
                                     <span data-line-text="{{ $logContent }}"
-                                        x-effect="searchQuery; renderHighlightedLog($el, $el.dataset.lineText)"
+                                        x-effect="renderTrigger; searchQuery; renderHighlightedLog($el, $el.dataset.lineText)"
                                         class="whitespace-pre-wrap break-all"></span>
                                 </div>
                             @endforeach