From 64ccce4bd55fec0ea83541097d0c4a03bc6c11a3 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Mon, 1 Apr 2024 19:52:22 +0100
Subject: [PATCH] Add field-sizing-content class that makes input and textarea
 fields it is applied to automatically scale to the size of their content.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/settings-advanced.js | 2 +-
 settings-api.lp                         | 4 ++--
 settings-dhcp.lp                        | 2 +-
 settings-dns.lp                         | 2 +-
 style/pi-hole.css                       | 4 ++++
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/scripts/pi-hole/js/settings-advanced.js b/scripts/pi-hole/js/settings-advanced.js
index 6286617c..9f73bf74 100644
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/scripts/pi-hole/js/settings-advanced.js
@@ -209,7 +209,7 @@ function generateRow(topic, key, value) {
       box +=
         '<label class="col-sm-5 control-label">Values (one item per line)</label>' +
         '<div class="col-sm-7">' +
-        '<textarea class="form-control" data-key="' +
+        '<textarea class="form-control field-sizing-content" data-key="' +
         key +
         '"' +
         extraAttributes +
diff --git a/settings-api.lp b/settings-api.lp
index 5ff1012d..c6e5eb00 100644
--- a/settings-api.lp
+++ b/settings-api.lp
@@ -25,12 +25,12 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                         <div class="row">
                             <div class="col-md-6">
                                 <p><strong>Domains to be excluded from Top Domain Lists and Query Log</strong></p>
-                                <textarea class="form-control" rows="4" id="webserver.api.excludeDomains" data-key="webserver.api.excludeDomains" placeholder="Enter regex domains, one per line" style="resize: vertical;"></textarea>
+                                <textarea class="form-control field-sizing-content" rows="4" id="webserver.api.excludeDomains" data-key="webserver.api.excludeDomains" placeholder="Enter regex domains, one per line" style="resize: vertical;"></textarea>
                                 <p class="help-block">Domains may be described by their domain name (like <code>^example\.com$</code>)</p>
                             </div>
                             <div class="col-md-6">
                                 <p><strong>Clients to be excluded from Top Client Lists and Query Log </strong></p>
-                                <textarea class="form-control" rows="4" id="webserver.api.excludeClients" data-key="webserver.api.excludeClients" placeholder="Enter regex clients, one per line" style="resize: vertical;"></textarea>
+                                <textarea class="form-control field-sizing-content" rows="4" id="webserver.api.excludeClients" data-key="webserver.api.excludeClients" placeholder="Enter regex clients, one per line" style="resize: vertical;"></textarea>
                                 <p class="help-block">Clients may be described either by their IP addresses (IPv4 and IPv6 are supported), or hostnames (like <code>^laptop\.lan$</code>).</p>
                             </div>
                         </div>
diff --git a/settings-dhcp.lp b/settings-dhcp.lp
index 4be3ca45..a643b1d1 100644
--- a/settings-dhcp.lp
+++ b/settings-dhcp.lp
@@ -156,7 +156,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                 <div class="row">
                     <div class="col-xs-12 col-md-6">
                         <p>Specify per host parameters for the DHCP server. This allows a machine with a particular hardware address to be always allocated the same hostname, IP address and lease time. A hostname specified like this overrides any supplied by the DHCP client on the machine. It is also allowable to omit the hardware address and include the hostname, in which case the IP address and lease times will apply to any machine claiming that name.</p>
-                        <textarea class="form-control" id="dhcp-hosts" data-key="dhcp.hosts" style="resize: vertical;"></textarea><br>&nbsp;
+                        <textarea class="form-control field-sizing-content" id="dhcp-hosts" data-key="dhcp.hosts" style="resize: vertical;"></textarea><br>&nbsp;
                         <p>Each entry should be on a separate line, and should be of the form:</p>
                         <pre>[&lt;hwaddr&gt;][,id:&lt;client_id&gt;|*][,set:&lt;tag&gt;][,tag:&lt;tag&gt;][,&lt;ipaddr&gt;][,&lt;hostname&gt;][,&lt;lease_time&gt;][,ignore]</pre>
                         <p>Only one entry per MAC address is allowed.</p>
diff --git a/settings-dns.lp b/settings-dns.lp
index a67b6e6d..49e4b6f7 100644
--- a/settings-dns.lp
+++ b/settings-dns.lp
@@ -226,7 +226,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                         <p>Enabling Conditional Forwarding will also forward all hostnames (i.e., non-FQDNs) to the router
                             when "Never forward non-FQDNs" is <em>not</em> enabled.</p>
                         <p>The following list contains all reverse servers you want to add. The expected format is one server per line in form of <code>&lt;enabled&gt;,&lt;ip-address&gt;[/&lt;prefix-len&gt;],&lt;server&gt;[#&lt;port&gt;][,&lt;domain&gt;]</code>. A valid config line could look like <code>true,192.168.0.0/24,192.168.0.1,fritz.box</code></p>
-                        <textarea class="form-control" rows="3" id="dns.revServers" data-key="dns.revServers" placeholder="Enter reverse DNS servers, one per line" style="resize: vertical;"></textarea>
+                        <textarea class="form-control field-sizing-content" id="dns.revServers" data-key="dns.revServers" placeholder="Enter reverse DNS servers, one per line" style="resize: vertical;"></textarea>
                     </div>
                 </div>
             </div>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 034fb210..79b106f0 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1471,3 +1471,7 @@ table.dataTable tbody > tr > .selected {
     text-align: right;
   }
 }
+
+.field-sizing-content {
+  field-sizing: content;
+}