From 7d2e83cbc42f1e63d5c5b00ebd2835b640f2895a Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Sat, 2 Dec 2023 20:05:18 -0300
Subject: [PATCH 1/2] Fix the red line used to identify recent entries on the
 log pages

- use `display:grid` on the parent;
- set `width:100%` on the line element;
- set margin-bottom to `-1px`, to avoid a small jump when the line is hidden
---
 style/pi-hole.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index 393738f5..786ebde1 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1072,6 +1072,7 @@ table.dataTable tbody > tr > .selected {
 
 #output {
   position: relative;
+  display: grid;
   margin: 5px 0;
   min-height: 36px;
   padding: 4px 8px;
@@ -1140,8 +1141,8 @@ table.dataTable tbody > tr > .selected {
 }
 
 .hr-small {
-  margin-top: 0px;
-  margin-bottom: 0px;
+  width: 100%;
+  margin: 0 0 -1px;
   border-top: 1px solid #ff0000aa;
 }
 

From b281b676693a9770eddee5ba0baebef587cc45cf Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 4 Dec 2023 20:14:43 -0300
Subject: [PATCH 2/2] Replace `<span>` followed by line break with a `<div>`

---
 scripts/pi-hole/js/taillog.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/pi-hole/js/taillog.js b/scripts/pi-hole/js/taillog.js
index ad407aff..44351989 100644
--- a/scripts/pi-hole/js/taillog.js
+++ b/scripts/pi-hole/js/taillog.js
@@ -91,7 +91,7 @@ function getData() {
       // Check if we have a new PID -> FTL was restarted
       if (lastPID !== data.pid) {
         if (lastPID !== -1) {
-          $("#output").append("<i class='text-danger'>*** FTL restarted ***</i><br>");
+          $("#output").append("<div><i class='text-danger'>*** FTL restarted ***</i></div>");
         }
 
         // Remember PID
@@ -106,7 +106,7 @@ function getData() {
       // Set placeholder text if log file is empty and we have no new lines
       if (data.log.length === 0) {
         if (nextID === 0) {
-          $("#output").html("<i>*** Log file is empty ***</i>");
+          $("#output").html("<div><i>*** Log file is empty ***</i></div>");
         }
 
         utils.setTimer(getData, REFRESH_INTERVAL.logs);
@@ -128,11 +128,11 @@ function getData() {
 
         // Add new line to output
         $("#output").append(
-          '<span class="log-entry"><span class="text-muted">' +
+          '<div class="log-entry"><span class="text-muted">' +
             moment(1000 * line.timestamp).format("YYYY-MM-DD HH:mm:ss.SSS") +
             "</span> " +
             line.message +
-            "</span><br>"
+            "</div>"
         );
         if (fadeIn) {
           //$(".left-line:last").fadeOut(2000);