Avoid overlaping text when showing confirmation messages on small screens

Also fix LCARS theme styles for the new interface

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

Author: rdwebdesign

settings-dhcp.lp

@@ -173,7 +173,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             <div class="box-body">
                 <div class="row">
                     <div class="col-md-12">
-                        <div class="table-responsive" style="margin-bottom: 10px;">
+                        <div class="table-responsive">
                             <table id="StaticDHCPTable" class="table table-striped table-bordered nowrap" width="100%">
                                 <thead>
                                     <tr>

style/pi-hole.css

@@ -1600,6 +1600,11 @@ table.dataTable tbody > tr > .selected {
   transition: opacity 200ms ease-in-out;
 }
 
+#StaticDHCPTable,
+.table-responsive:has(#StaticDHCPTable) {
+  margin: 0;
+}
+
 #StaticDHCPTable th:last-of-type,
 #StaticDHCPTable td:last-of-type {
   width: 106px;
@@ -1611,6 +1616,26 @@ table.dataTable tbody > tr > .selected {
   color: #fff;
 }
 
+/* Show hint message on the static DHCP lease table, when at least one Save button exists */
+div:has(> .table-responsive #StaticDHCPTable) {
+  position: relative;
+  margin-bottom: 15px;
+}
+div:has(> .table-responsive #StaticDHCPTable .save-static-row)::after {
+  content: 'Please confirm changes using the green button, then click "Save & Apply" before leaving the page.';
+  position: relative;
+  margin: 2px 0 15px;
+  padding: 4px 12px;
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: 100%;
+  color: #000;
+  font-style: italic;
+  text-align: right;
+  background: #eedd88;
+  float: right;
+}
+
 textarea.field-sizing-content {
   min-block-size: 3.5rlh;
   max-block-size: 20rlh;
@@ -1625,24 +1650,6 @@ textarea.no-wrap {
   resize: none;
 }
 
-/* Show hint message on the static DHCP lease table, when at least one Save button exists */
-div:has(> .table-responsive #StaticDHCPTable) {
-  position: relative;
-}
-div:has(> .table-responsive #StaticDHCPTable .save-static-row)::before {
-  content: 'Please confirm changes using the green button, then click "Save & Apply" before leaving the page.';
-  position:absolute;
-  display: block;
-  padding: 4px 12px;
-  max-width: calc(100% - 30px);
-  right: 15px;
-  bottom: 0px;
-  color: #000;
-  font-style: italic;
-  text-align: right;
-  background: #eedd88;
-}
-
 /*
 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:
@@ -1676,6 +1683,7 @@ border-top=1px + padding-top=6px + padding-bottom=6px + border-bottom=1px
   background: #ed8;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
   cursor: not-allowed;
+  z-index: 10;
 }
 
 #dhcp-hosts {