trying to make the logs view to have better date format.

app/web/static/logs.js

@@ -25,15 +25,27 @@ document.addEventListener('DOMContentLoaded', () => {
             const response = await fetch(url);
             console.log('Response status:', response.status);
             if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
+                const errorText = await response.text(); // Try to get response body as text
+                console.error('Response text on error:', errorText); // Log it
+                // If the server returns a 404, it might be due to a stale UUID.
+                // Log a more specific message.
+                if (response.status === 404) {
+                    console.error(`404 Not Found: Service UUID mismatch. Current page UUID: ${serviceUuid}. Server UUID might have changed. Please hard refresh the page.`);
+                    logTableContainer.innerHTML = `<p class="loading-message error-message">Error: Service UUID mismatch. Please hard refresh your browser tab (Ctrl+F5 or Cmd+Shift+R).</p>`;
+                } else {
+                    // Log the status code to help debug
+                    console.error(`HTTP error! status: ${response.status} - ${errorText}`);
+                    logTableContainer.innerHTML = `<p class="loading-message error-message">Error loading logs. HTTP Status: ${response.status}. Please check server connection or hard refresh.</p>`;
+                }
+                return; // Stop further processing if error
             }
             const data = await response.json();
             console.log('Received logs:', data.logs.length);
             renderLogTable(data.logs);
             logCountSpan.textContent = data.log_count;
         } catch (error) {
-            console.error("Error fetching logs:", error);
-            logTableContainer.innerHTML = '<p class="loading-message">Error loading logs. Please check server connection.</p>';
+            console.error("Error fetching logs (JSON parsing or other):", error);
+            logTableContainer.innerHTML = '<p class="loading-message error-message">Error loading logs. Failed to parse response or other network issue. See console for details.</p>';
         }
     }
 
@@ -138,9 +150,9 @@ document.addEventListener('DOMContentLoaded', () => {
     applyFiltersButton.addEventListener('click', () => {
         const selectedRadio = document.querySelector('input[name="log-level"]:checked');
         currentLevel = selectedRadio ? selectedRadio.value : '';
-        const sinceValue = sinceFilter.value;
-        // Convert local datetime input to ISO string for backend, handling potential timezone issues
-        currentSince = sinceValue ? new Date(sinceValue).toISOString().replace(/\.\d{3}Z$/, 'Z') : ''; // Ensure 'Z' for UTC
+        // Send the datetime-local value directly. It's already in YYYY-MM-DDTHH:mm (24-hour) format.
+        // The backend will interpret this as UTC.
+        currentSince = sinceFilter.value;
         console.log('Applying filters:', { level: currentLevel, since: currentSince });
         fetchLogs();
     });

app/web/static/script.js

@@ -19,8 +19,8 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function renderNodeGrid(nodes) {
-        nodeGridContainer.innerHTML = ''; // Clear existing content
-        nodeCountSpan.textContent = nodes.length; // Update total node count
+        nodeGridContainer.innerHTML = '';
+        nodeCountSpan.textContent = nodes.length;
 
         if (nodes.length === 0) {
             nodeGridContainer.innerHTML = '<p class="loading-message">No nodes reporting yet. Start a client!</p>';
@@ -132,3 +132,4 @@ document.addEventListener('DOMContentLoaded', () => {
     fetchNodeData();
     setInterval(fetchNodeData, POLLING_INTERVAL_MS);
 });
+

app/web/static/style.css

@@ -40,6 +40,8 @@ body {
     margin-bottom: 20px;
     width: 80vw;
     max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 h1 {
@@ -63,13 +65,17 @@ code {
 }
 
 #node-grid-container, #log-table-container {
-    width: 80vw;
-    max-width: 1200px;
+    width: 95vw;
+    max-width: 1600px;
     min-width: 400px;
     padding: 20px;
     background-color: var(--nord3);
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    margin-bottom: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    overflow-x: auto;
 }
 
 .connection-grid {