From 82370a025337a39b52b2f805bf276cb671e54c41 Mon Sep 17 00:00:00 2001
From: Chuck <33324927+ChuckBuilds@users.noreply.github.com>
Date: Thu, 12 Feb 2026 22:14:20 -0500
Subject: [PATCH] =?UTF-8?q?Fix=20log=20viewer=20readability=20=E2=80=94=20?=
 =?UTF-8?q?add=20missing=20CSS=20utility=20classes=20(#244)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(web): add missing utility classes for log viewer readability

The log viewer uses text-gray-100, text-gray-200, text-gray-300,
text-red-300, text-yellow-300, bg-gray-800, bg-red-900, bg-yellow-900,
border-gray-700, and hover:bg-gray-800 — none of which were defined in
app.css. Without definitions, log text inherited the body's dark color
(#111827) which was invisible against the dark bg-gray-900 log container
in light mode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(web): remove dead bg-opacity classes, use proper log level colors

The bg-opacity-10/bg-opacity-30 classes set a --bg-opacity CSS variable
that no background-color rule consumed, making them dead code. Replace
the broken two-class pattern (e.g. "bg-red-900 bg-opacity-10") with
dedicated log-level-error/warning/debug classes that use rgb() with
actual alpha values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Chuck <chuck@example.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 web_interface/static/v3/app.css               | 13 +++++++++++++
 web_interface/templates/v3/partials/logs.html |  6 +++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/web_interface/static/v3/app.css b/web_interface/static/v3/app.css
index 44d64334..54ae4eb6 100644
--- a/web_interface/static/v3/app.css
+++ b/web_interface/static/v3/app.css
@@ -101,6 +101,7 @@ body {
 /* Utility classes */
 .bg-gray-50 { background-color: #f9fafb; }
 .bg-white { background-color: #ffffff; }
+.bg-gray-800 { background-color: #1f2937; }
 .bg-gray-900 { background-color: #111827; }
 .bg-green-500 { background-color: #10b981; }
 .bg-red-500 { background-color: #ef4444; }
@@ -112,16 +113,27 @@ body {
 .bg-yellow-600 { background-color: #d97706; }
 .bg-gray-200 { background-color: #e5e7eb; }
 
+/* Log level row backgrounds (subtle tints on dark log container) */
+.log-level-error { background-color: rgb(127 29 29 / 10%); }
+.log-level-warning { background-color: rgb(120 53 15 / 10%); }
+.log-level-debug { background-color: rgb(31 41 55 / 30%); }
+
+.text-gray-100 { color: #f3f4f6; }
+.text-gray-200 { color: #e5e7eb; }
+.text-gray-300 { color: #d1d5db; }
 .text-gray-900 { color: #111827; }
 .text-gray-600 { color: #374151; }
 .text-gray-500 { color: #4b5563; }
 .text-gray-400 { color: #6b7280; }
+.text-red-300 { color: #fca5a5; }
+.text-yellow-300 { color: #fcd34d; }
 .text-white { color: #ffffff; }
 .text-green-600 { color: #059669; }
 .text-red-600 { color: #dc2626; }
 
 .border-gray-200 { border-color: #e5e7eb; }
 .border-gray-300 { border-color: #d1d5db; }
+.border-gray-700 { border-color: #374151; }
 .border-transparent { border-color: transparent; }
 
 .rounded-lg { border-radius: 0.5rem; }
@@ -249,6 +261,7 @@ h4 { font-size: 1.125rem; }
 .hover\:bg-green-700:hover { background-color: #047857; }
 .hover\:bg-red-700:hover { background-color: #b91c1c; }
 .hover\:bg-gray-50:hover { background-color: #f9fafb; }
+.hover\:bg-gray-800:hover { background-color: #1f2937; }
 .hover\:bg-yellow-700:hover { background-color: #b45309; }
 .hover\:text-gray-700:hover { color: #374151; }
 .hover\:border-gray-300:hover { border-color: #d1d5db; }
diff --git a/web_interface/templates/v3/partials/logs.html b/web_interface/templates/v3/partials/logs.html
index be2cb3a7..cb2cff73 100644
--- a/web_interface/templates/v3/partials/logs.html
+++ b/web_interface/templates/v3/partials/logs.html
@@ -380,10 +380,10 @@ function renderLogs() {
 function getLogLevelClass(level) {
     // Background color for the entire log entry row
     const classes = {
-        'ERROR': 'bg-red-900 bg-opacity-10',
-        'WARNING': 'bg-yellow-900 bg-opacity-10',
+        'ERROR': 'log-level-error',
+        'WARNING': 'log-level-warning',
         'INFO': '',
-        'DEBUG': 'bg-gray-800 bg-opacity-30'
+        'DEBUG': 'log-level-debug'
     };
     return classes[level] || '';
 }