From 7a66f251507602de7fbd11f29ad2a88f0dbce2a3 Mon Sep 17 00:00:00 2001
From: pablinux <pablinux@hotmail.es>
Date: Tue, 20 Jan 2026 06:43:46 -0500
Subject: [PATCH] fix: Evitar desbordamiento horizontal en logs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregado overflow-x-auto a contenedores de logs
- Agregado break-words y overflow-wrap-anywhere a líneas de logs
- Aplicado tanto en logs de aplicaciones como en errores del sistema
- Las líneas largas ahora se ajustan correctamente sin scroll horizontal
---
 web/logs.html | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/logs.html b/web/logs.html
index c492092..4a8b6b1 100644
--- a/web/logs.html
+++ b/web/logs.html
@@ -238,9 +238,12 @@
                 <!-- Tab Content: App Logs -->
                 <div
                     id="content-app-logs"
-                    class="flex-1 bg-[#0a0f16] overflow-y-auto p-4 font-mono text-sm tab-content"
+                    class="flex-1 bg-[#0a0f16] overflow-y-auto overflow-x-auto p-4 font-mono text-sm tab-content"
                 >
-                    <div id="log-container" class="space-y-1">
+                    <div
+                        id="log-container"
+                        class="space-y-1 break-words overflow-wrap-anywhere"
+                    >
                         <!-- Welcome Message -->
                         <div class="text-[#9dabb9] opacity-50">
                             <span class="text-green-400">●</span> SIAX Monitor
@@ -256,9 +259,12 @@
                 <!-- Tab Content: System Errors -->
                 <div
                     id="content-system-errors"
-                    class="hidden flex-1 bg-[#0a0f16] overflow-y-auto p-4 font-mono text-sm tab-content"
+                    class="hidden flex-1 bg-[#0a0f16] overflow-y-auto overflow-x-auto p-4 font-mono text-sm tab-content"
                 >
-                    <div id="system-errors-container" class="space-y-1">
+                    <div
+                        id="system-errors-container"
+                        class="space-y-1 break-words overflow-wrap-anywhere"
+                    >
                         <div class="text-[#9dabb9] opacity-50">
                             <span class="text-yellow-400">⚠</span> Cargando logs
                             de errores del sistema...
@@ -405,7 +411,8 @@
             function appendLog(type, message, logData = null) {
                 const logContainer = document.getElementById("log-container");
                 const logEntry = document.createElement("div");
-                logEntry.className = "log-line";
+                logEntry.className =
+                    "log-line break-words overflow-wrap-anywhere";
 
                 const timestamp = new Date()
                     .toISOString()
@@ -572,7 +579,7 @@
                                     color = "text-blue-400";
                                 }
 
-                                return `<div class="log-line ${color}">${icon} ${escapeHtml(line)}</div>`;
+                                return `<div class="log-line break-words overflow-wrap-anywhere ${color}">${icon} ${escapeHtml(line)}</div>`;
                             })
                             .join("");