Enhance log display behavior and menu state management

html/css/screen.css

@@ -467,6 +467,10 @@ nav p {
   padding: 8px;
   border-radius: 8px;
   background: rgba(13, 31, 49, 0.72);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.45;
 }
 
 #logScreen p {
@@ -689,6 +693,45 @@ nav p {
     max-height: 96px;
   }
 
+  body.menu-log-focus #clientInfo,
+  body.menu-log-focus .dashboard-cards,
+  body.menu-log-focus #myStreamsBox {
+    display: none;
+  }
+
+  body.menu-log-focus #content {
+    padding: 8px;
+    padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  }
+
+  body.menu-log-focus #content h3 {
+    margin-bottom: 4px;
+  }
+
+  body.menu-log-focus #content-interaction {
+    top: 8px;
+    margin-bottom: 8px;
+    padding: 6px;
+  }
+
+  body.menu-log-focus #content-interaction .search {
+    display: none;
+  }
+
+  body.menu-log-focus #content-interaction input[type=button] {
+    min-height: 38px;
+  }
+
+  body.menu-log-focus #content_log {
+    padding: 5px;
+  }
+
+  body.menu-log-focus #content_log pre {
+    margin-bottom: 4px;
+    padding: 7px;
+    font-size: 11px;
+  }
+
   .phone {
     display: none;
   }

html/js/logs_ts.js

@@ -21,15 +21,22 @@ function showLogs(bottom) {
     var log = new Log();
     var logs = SERVER["log"]["log"];
     var div = document.getElementById("content_log");
+    var wrapper = document.getElementById("box-wrapper");
+    var shouldStickToBottom = bottom;
     div.innerHTML = "";
+    if (wrapper != null && shouldStickToBottom == false) {
+        var distanceToBottom = wrapper.scrollHeight - wrapper.scrollTop - wrapper.clientHeight;
+        if (distanceToBottom < 80) {
+            shouldStickToBottom = true;
+        }
+    }
     var keys = getObjKeys(logs);
     keys.forEach(function (logID) {
         var entry = log.createLog(logs[logID]);
         div.append(entry);
     });
     setTimeout(function () {
-        if (bottom == true) {
-            var wrapper = document.getElementById("box-wrapper");
+        if (shouldStickToBottom == true && wrapper != null) {
             wrapper.scrollTop = wrapper.scrollHeight;
         }
     }, 10);

html/js/menu_ts.js

@@ -895,9 +895,28 @@ function setActiveMenu(menuID) {
         items[i].removeAttribute("aria-current");
     }
     var activeItem = document.getElementById(ACTIVE_MENU_ID);
+    var activeMenuKey = "";
     if (activeItem != null) {
         activeItem.classList.add("menu-active");
         activeItem.setAttribute("aria-current", "page");
+        var menuKeyValue = activeItem.getAttribute("data-menu");
+        if (menuKeyValue != null) {
+            activeMenuKey = menuKeyValue;
+        }
+    }
+    if (document.body != null) {
+        if (activeMenuKey.length > 0) {
+            document.body.setAttribute("data-active-menu", activeMenuKey);
+        }
+        else {
+            document.body.removeAttribute("data-active-menu");
+        }
+        if (activeMenuKey == "log") {
+            document.body.classList.add("menu-log-focus");
+        }
+        else {
+            document.body.classList.remove("menu-log-focus");
+        }
     }
 }
 function renderStatusCards() {
@@ -989,6 +1008,9 @@ function PageReady() {
         calculateWrapperHeight();
     }, true);
     setInterval(function () {
+        if (document.hidden == true) {
+            return;
+        }
         updateLog();
     }, 10000);
     return;

html/js/network_ts.js

@@ -88,7 +88,7 @@ var Server = /** @class */ (function () {
                 errorState = "idle";
             }
             finishRequest(errorState, false);
-            if (WS_AVAILABLE == false) {
+            if (WS_AVAILABLE == false && isLogUpdate == false) {
                 alert("No websocket connection to xTeVe could be established. Check your network configuration.");
             }
         };