Fix admin table and playlist reorder UI

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();
         }
       });