Fix admin table and playlist reorder UI

src/web/public/css/admin.css

@@ -1094,6 +1094,13 @@ label {
   color: var(--text);
 }
 
+label > input,
+label > textarea,
+label > select,
+label > button  {
+  margin-top: 6px;
+}
+
 input,
 textarea,
 select,
@@ -1101,7 +1108,6 @@ button {
   width: 100%;
   box-sizing: border-box;
   padding: 10px 12px;
-  margin-top: 6px;
   border: 1px solid var(--border-strong);
   border-radius: 12px;
   font: inherit;
@@ -1619,7 +1625,8 @@ tbody tr:last-child td {
   }
 
   table.table-cards td[data-label="Actions"] {
-    width: 100%;
+    width: 1%;
+    white-space: nowrap;
   }
 
   table.table-cards td .actions {
@@ -1628,11 +1635,11 @@ tbody tr:last-child td {
   }
 
   table.table-cards td[data-label="Actions"] .actions {
-    display: flex;
+    display: inline-flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     justify-content: flex-start;
-    width: 100%;
+    width: auto;
   }
 
   table.table-cards td[data-label="Actions"] .actions > * {
@@ -1662,7 +1669,7 @@ tbody tr:last-child td {
   table.table-cards td[data-label="Actions"] .list-action {
     display: inline-flex;
     width: auto;
-    min-width: 96px;
+    min-width: 0;
     white-space: nowrap;
   }
 
@@ -1902,6 +1909,7 @@ table td .actions form {
   height: 28px;
   padding: 0;
   border: 0;
+  margin: 0;
   border-radius: 0;
   color: var(--muted);
   background: currentColor;
@@ -1948,33 +1956,26 @@ tr.sortable-drag {
   background: var(--surface);
 }
 
+#playlist-items-body tr.sortable-drag {
+  display: flex;
+  align-items: stretch;
+}
+
+#playlist-items-body tr.sortable-drag > td {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+#playlist-items-body tr.sortable-drag .playlist-order-cell-inner {
+  height: 100%;
+}
+
+#playlist-items-body tr.sortable-drag .playlist-drag-handle {
+  align-self: center;
+}
+
 @media (min-width: 721px) {
-  table.table-cards tr > td:nth-child(1),
-  table.table-cards tr > th:nth-child(1) {
-    width: 1%;
-    white-space: nowrap;
-  }
-
-  table.table-cards tr > td:nth-child(2),
-  table.table-cards tr > th:nth-child(2) {
-    width: 36%;
-  }
-
-  table.table-cards tr > td:nth-child(3),
-  table.table-cards tr > th:nth-child(3) {
-    width: 36%;
-  }
-
-  table.table-cards tr > td:nth-child(4),
-  table.table-cards tr > th:nth-child(4) {
-    width: 10%;
-  }
-
-  table.table-cards tr > td:nth-child(5),
-  table.table-cards tr > th:nth-child(5) {
-    width: 1%;
-    white-space: nowrap;
-  }
 }
 
 .actions form {

src/web/public/js/admin-page.js

@@ -165,7 +165,7 @@
 
     return [
       '<tr data-client-key="' + escapeHtml(getClientRowKey(client)) + '">',
-      '<td data-label="Client/Connection ID"><div class="connection-count">' + clientId + '</div><div class="connection-id">' + connectionId + '</div></td>',
+      '<td data-label="Client/Connection ID"><div class="connection-count">' + clientId + '</div><br><div class="connection-id">' + connectionId + '</div></td>',
       '<td data-label="IP">' + clientIp + '</td>',
       '<td data-label="Viewport">' + viewport + '</td>',
       '<td data-label="Connected">' + connectedAt + '</td>',
@@ -249,7 +249,7 @@
         var connectionId = client.id ? escapeHtml(client.id) : '<span class="empty">Unknown</span>';
         var currentSlide = client.currentSlideTitle ? escapeHtml(client.currentSlideTitle) : 'No slide currently showing';
 
-        row.cells[0].innerHTML = '<div class="connection-count">' + clientId + '</div><div class="connection-id">' + connectionId + '</div>';
+        row.cells[0].innerHTML = '<div class="connection-count">' + clientId + '</div><br><div class="connection-id">' + connectionId + '</div>';
         row.cells[1].innerHTML = clientIp;
         row.cells[2].innerHTML = viewport;
         row.cells[3].innerHTML = connectedAt;

src/web/public/js/playlist-schedule.js

@@ -371,6 +371,40 @@
       updateEmptyState();
     }
 
+    function lockDraggedRowWidths(row) {
+      if (!row) {
+        return;
+      }
+
+      var rowRect = row.getBoundingClientRect();
+      row.style.width = rowRect.width + 'px';
+      row.style.height = rowRect.height + 'px';
+      row.style.boxSizing = 'border-box';
+
+      Array.prototype.forEach.call(row.children, function (cell) {
+        var cellRect = cell.getBoundingClientRect();
+        cell.style.width = cellRect.width + 'px';
+        cell.style.height = cellRect.height + 'px';
+        cell.style.boxSizing = 'border-box';
+      });
+    }
+
+    function unlockDraggedRowWidths(row) {
+      if (!row) {
+        return;
+      }
+
+      row.style.width = '';
+      row.style.height = '';
+      row.style.boxSizing = '';
+
+      Array.prototype.forEach.call(row.children, function (cell) {
+        cell.style.width = '';
+        cell.style.height = '';
+        cell.style.boxSizing = '';
+      });
+    }
+
     function setRowSchedule(row, values) {
       var modeInput = row.querySelector('[name="schedule_mode[]"]');
       var startDatetime = row.querySelector('[name="schedule_start_datetime[]"]');
@@ -472,7 +506,14 @@
         fallbackTolerance: 3,
         swapThreshold: 0.65,
         invertedSwapThreshold: 0.65,
+        onChoose: function (event) {
+          lockDraggedRowWidths(event && event.item);
+        },
+        onUnchoose: function (event) {
+          unlockDraggedRowWidths(event && event.item);
+        },
         onEnd: function () {
+          unlockDraggedRowWidths(tbody.querySelector('.sortable-drag'));
           updateRowOrder();
         }
       });