From 8cfe0b4083c120e9e58c0a712a723e3f010d6fec Mon Sep 17 00:00:00 2001
From: Wilko <wilkobehrend@mac.com>
Date: Mon, 12 Jan 2026 13:55:00 +0100
Subject: [PATCH] Improve log viewer mobile responsiveness and styling

---
 html/logs.html       |   8 +--
 static/css/style.css | 120 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 124 insertions(+), 4 deletions(-)

diff --git a/html/logs.html b/html/logs.html
index b08517b..2e9110f 100644
--- a/html/logs.html
+++ b/html/logs.html
@@ -49,7 +49,7 @@ <h1>Log Viewer</h1>
         </div>
     </div>
     
-    <div id="logContainer" style="background-color: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 12px; max-height: 70vh; overflow-y: auto; margin-top: 15px;">
+    <div id="logContainer" style="background-color: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 12px; max-height: 70vh; overflow-y: auto; margin-top: 15px; word-wrap: break-word;">
         <div style="color: #888;">Loading logs...</div>
     </div>
 </div>
@@ -98,12 +98,12 @@ <h1>Log Viewer</h1>
         const levelColor = getLevelColor(entry.level);
         const timestamp = formatTimestamp(entry.timestamp);
         const fields = formatFields(entry.fields);
-        return `<div style="margin-bottom: 4px; padding: 2px 0; display: flex; align-items: flex-start;">
-            <div style="flex-shrink: 0; padding-right: 8px;">
+        return `<div class="log-entry" style="margin-bottom: 4px; padding: 2px 0; display: flex; align-items: flex-start;">
+            <div class="log-meta" style="flex-shrink: 0; padding-right: 8px; white-space: nowrap;">
                 <span style="color: #888;">[${timestamp}]</span>
                 <span style="color: ${levelColor}; font-weight: bold; margin-left: 8px; display: inline-block; width: 70px; font-family: monospace; text-align: left;">[${entry.level.toUpperCase()}]</span>
             </div>
-            <div style="flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word;">${escapeHtml(entry.message)}<span style="color: #888;">${escapeHtml(fields)}</span></div>
+            <div class="log-message" style="flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word;">${escapeHtml(entry.message)}<span style="color: #888;">${escapeHtml(fields)}</span></div>
         </div>`;
     }).join('');
     
diff --git a/static/css/style.css b/static/css/style.css
index 89ecebd..b2d5f7e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -26,6 +26,7 @@ body {
     .log-viewer-container {
         min-width: auto;
         max-width: 100%;
+        padding: 16px !important;
     }
 }
 
@@ -161,6 +162,45 @@ input:checked + .slider:before {
     flex: 1;
 }
 
+/* Mobile responsive for settings */
+@media (max-width: 768px) {
+    .setting {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+    
+    .setting span:first-child {
+        width: 100%;
+        margin-bottom: 4px;
+    }
+    
+    .value {
+        width: 100%;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .value form {
+        display: block !important;
+        width: 100%;
+        margin-left: 0 !important;
+    }
+    
+    .value form button {
+        width: 100%;
+        margin-left: 0 !important;
+        margin-top: 4px;
+    }
+    
+    .value .active-badge,
+    .value .not-generated {
+        margin-bottom: 8px;
+    }
+}
+
 /* Verbräuche in Watt */
 .consumption {
     font-size: 16px;
@@ -547,3 +587,83 @@ input:checked + .slider:before {
         color: #ddd !important;
     }
 }
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+    .container {
+        max-width: 100%;
+        padding: 16px;
+        margin-top: 16px;
+        margin-bottom: 16px;
+    }
+    
+    .message-container {
+        max-width: 100%;
+        padding: 0 16px;
+    }
+    
+    h1 {
+        font-size: 24px;
+    }
+    
+    h2 {
+        font-size: 20px;
+    }
+    
+    h3 {
+        font-size: 16px;
+    }
+    
+    /* Log viewer mobile improvements */
+    .log-viewer-container .add-setting > div {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .log-viewer-container .add-setting label {
+        margin-left: 0 !important;
+        margin-top: 10px;
+        margin-bottom: 5px;
+    }
+    
+    .log-viewer-container .add-setting select,
+    .log-viewer-container .add-setting button {
+        width: 100%;
+        margin-left: 0 !important;
+        margin-top: 5px;
+    }
+    
+    .log-stats {
+        font-size: 12px;
+        word-wrap: break-word;
+    }
+    
+    /* Log entries mobile layout */
+    #logContainer {
+        font-size: 11px !important;
+        padding: 12px !important;
+    }
+    
+    .log-entry {
+        flex-direction: column !important;
+        padding: 8px 0 !important;
+        border-bottom: 1px solid #333 !important;
+    }
+    
+    .log-meta {
+        margin-bottom: 6px !important;
+        padding-right: 0 !important;
+        white-space: normal !important;
+    }
+    
+    .log-meta span:last-child {
+        width: auto !important;
+        margin-left: 8px !important;
+    }
+    
+    .log-message {
+        font-size: 13px !important;
+        line-height: 1.6 !important;
+        width: 100% !important;
+    }
+}