Use a different approach to update .dhcp-hosts height

- replace DOMContentLoaded listener with a function and call it when needed
- use javascript to update the CSS variable `--num-lines`
- use CSS to calculate the elements height

Signed-off-by: RD WebDesign <[email protected]>

Author: rdwebdesign

scripts/js/settings-dhcp.js

@@ -438,6 +438,7 @@ function renderStaticDHCPTable() {
 
   tbody.find(".delete-static-row, .add-static-row").prop("disabled", false);
   tbody.find(".edit-hint-row").remove();
+  showLineNumbers();
 }
 
 // Copy button for each lease row copies the lease as a new static lease line
@@ -452,7 +453,7 @@ $(document).on("click", ".copy-to-static", function () {
 });
 
 // Add line numbers to the textarea for static DHCP hosts
-document.addEventListener("DOMContentLoaded", function () {
+function showLineNumbers() {
   const textarea = document.getElementById("dhcp-hosts");
   const linesElem = document.getElementById("dhcp-hosts-lines");
   let lastLineCount = 0;
@@ -473,14 +474,13 @@ document.addEventListener("DOMContentLoaded", function () {
       "letterSpacing",
       "lineHeight",
       "padding",
-      "height",
     ]) {
       linesElem.style[property] = globalThis.getComputedStyle(textarea)[property];
     }
 
-    // Match height and scroll
-    linesElem.style.height = textarea.offsetHeight > 0 ? textarea.offsetHeight + "px" : "auto";
-  }
+    // Update "--num-lines" variable and let CSS handle the height
+    $(".dhcp-hosts-wrapper").css("--num-lines", lines);
+}
 
   function syncScroll() {
     linesElem.scrollTop = textarea.scrollTop;
@@ -497,7 +497,7 @@ document.addEventListener("DOMContentLoaded", function () {
     updateLineNumbers(true);
     syncScroll();
   }
-});
+}
 
 $(document).on("input blur paste", "#StaticDHCPTable td.static-hwaddr", function () {
   const val = $(this).text().trim();

style/pi-hole.css

@@ -1651,6 +1651,30 @@ div.dhcp-hosts-wrapper {
   color: #fff;
 }
 
+/*
+Calculate the total height using the number of lines and line-height. Also account for borders and padding.
+Use the same values used by ".form-control" class:
+line-height=1.42857; font-size=14px;
+border-top=1px + padding-top=6px + padding-bottom=6px + border-bottom=1px
+
+(num-lines * line-height * font-size) + 14px
+*/
+.dhcp-hosts-wrapper {
+  --num-lines: 1;
+  --max-lines: 12;
+  --total-height: calc((min(var(--num-lines), var(--max-lines)) * 1.42857 * 14px) + 14px);
+}
+
+#dhcp-hosts {
+  height: var(--total-height);
+}
+
+#dhcp-hosts-lines {
+  height: var(--total-height);
+  border: 1px solid transparent;
+  border-right-color: #ddd;
+}
+
 .save-static-row.disabled {
   opacity: 0.15;
 }