Adjust Lists table layout and details rows

- disable autoWidth and use a fixed width of 2.4rem for the first 3
  columns containing icons (checkbox, status and type);
- force some columns to use type "html", to make sure datatables won't
  automatically change column type to "numeric" and force right aligned
  text;
- adjust CSS rules used to create the checkbox column.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

scripts/js/groups-lists.js

@@ -50,31 +50,31 @@ function format(data) {
       ? Math.trunc(data.invalid_domains).toLocaleString()
       : "N/A";
 
-  return `<table>
-      <tr class="dataTables-child">
-        <td>Type:&nbsp;&nbsp;</td><td>${setTypeIcon(data.type)}${data.type}list</td>
+  return `<table class="dataTables-child">
+      <tr>
+        <td>Type:</td><td>${setTypeIcon(data.type)}&nbsp;${data.type}list</td>
       </tr>
-      <tr class="dataTables-child">
-        <td>Health status:&nbsp;&nbsp;</td><td>${statusText}</td>
+      <tr>
+        <td>Health status:</td><td>${statusText}</td>
       </tr>
-      <tr class="dataTables-child">
-        <td>Added to Pi-hole:&nbsp;&nbsp;</td>
+      <tr>
+        <td>Added to Pi-hole:</td>
         <td>${utils.datetimeRelative(data.date_added)}&nbsp;(${dateAddedISO})</td>
       </tr>
-      <tr class="dataTables-child">
-        <td>Database entry last modified:&nbsp;&nbsp;</td>
+      <tr>
+        <td>Database entry last modified:</td>
         <td>${utils.datetimeRelative(data.date_modified)}&nbsp;(${dateModifiedISO})</td>
       </tr>
-      <tr class="dataTables-child">
-        <td>Content last updated on:&nbsp;&nbsp;</td><td>${dateUpdated}</td>
+      <tr>
+        <td>Content last updated on:</td><td>${dateUpdated}</td>
       </tr>
-      <tr class="dataTables-child">
-        <td>Number of entries:&nbsp;&nbsp;</td><td>${numberOfEntries}</td>
+      <tr>
+        <td>Number of entries:</td><td>${numberOfEntries}</td>
       </tr>
-      <tr class="dataTables-child">
-        <td>Number of non-domains:&nbsp;&nbsp;</td><td>${nonDomains}</td>
+      <tr>
+        <td>Number of non-domains:</td><td>${nonDomains}</td>
       </tr>
-      <tr class="dataTables-child">
+      <tr>
         <td>Database ID:</td><td>${data.id}</td>
       </tr>
     </table>`;
@@ -177,16 +177,23 @@ function initTable() {
       dataSrc: "lists",
       type: "GET",
     },
+    autoWidth: false,
     order: [[0, "asc"]],
     columns: [
       { data: "id", visible: false },
-      { data: null, visible: true, orderable: false, width: "2rem" },
-      { data: "status", searchable: false, class: "details-control" },
-      { data: "type", searchable: false, class: "details-control" },
+      { data: null, visible: true, orderable: false, width: "2.4rem" },
+      {
+        data: "status",
+        searchable: false,
+        class: "details-control",
+        width: "2.4rem",
+        type: "html",
+      },
+      { data: "type", searchable: false, class: "details-control", width: "2.4rem", type: "html" },
       { data: "address" },
       { data: "enabled", searchable: false },
       { data: "comment" },
-      { data: "groups", searchable: false },
+      { data: "groups", searchable: false, type: "html" },
       { data: null, width: "22px", orderable: false },
     ],
     columnDefs: [

style/pi-hole.css

@@ -1255,13 +1255,17 @@ div.dt-buttons {
 table.dataTable tbody td.select-checkbox,
 table.dataTable tbody th.select-checkbox {
   position: relative;
+  min-width: 2.4rem;
 }
 
 table.dataTable tbody td.select-checkbox::before,
 table.dataTable tbody th.select-checkbox::before {
   content: "";
   position: absolute;
+  display: block;
   top: 12px;
+  left: 50%;
+  transform: translate(-50%, 0);
   width: 16px;
   height: 16px;
   border: 2px solid currentColor;
@@ -1280,12 +1284,12 @@ table.dataTable tr.selected th.select-checkbox::after {
   content: "";
   position: absolute;
   top: 14px;
-  left: 12px;
+  left: 50%;
   width: 6px;
-  height: 10px;
+  height: 9px;
   border-bottom: 2px solid currentColor;
   border-right: 2px solid currentColor;
-  transform: rotate(45deg);
+  transform: translate(-3px, 0) rotate(45deg);
 }
 
 /* Datatables selected row bgcolor */
@@ -1307,15 +1311,6 @@ table.table.dataTable.table-striped > tbody > tr.selected:nth-of-type(2n + 1) >
   font-size: 17px;
 }
 
-/* TODO: this should probably be done using BS5 classes and a better HTML markup */
-/* Keep the two single-icon columns (list status and list type) on the
-  subscribed-lists table the same width, and centre their icons. */
-#listsTable td.details-control,
-#listsTable th.details-control {
-  min-width: 3.5rem;
-  text-align: center;
-}
-
 /* TODO: this should probably be done using BS5 classes and newer datatables settings */
 /* DataTables renders its pager as a Bootstrap `.pagination` but no longer
   right-aligns it, so it drifted to the middle of its column. Restore the