fix device grid UI and nginx.conf

nginx/nginx.conf

@@ -39,7 +39,7 @@ server {
     # Internal MeshCentral hop to avoid upstream TLS handshake instability.
     set $meshserver meshcentral:8082;
     # Public host MeshCentral expects in Host header.
-    set $meshhost soict-overleaf.tailc51e09.ts.net;
+    set $meshhost soict-overleaf.tailc51e09.ts.net:8443
 
     root /usr/share/nginx/html;
     index index.html index.htm;

src/components/grids/device-grid.tsx

@@ -77,28 +77,56 @@ export function DeviceGrid({
     );
   };
 
-  const gridTemplateColumns = "repeat(auto-fit, minmax(6rem, 6rem))";
+  const columnsPerSide = 4;
+  const chunkRows = <T,>(items: T[], size: number) => {
+    const rows: T[][] = [];
+    for (let i = 0; i < items.length; i += size) {
+      rows.push(items.slice(i, i + size));
+    }
+    return rows;
+  };
+
+  const leftRows = chunkRows(leftDevices, columnsPerSide);
+  const rightRows = chunkRows(rightDevices, columnsPerSide);
+  const totalRows = Math.max(leftRows.length, rightRows.length);
+
+  const renderPlaceholder = (key: string) => (
+    <div key={key} className="w-24 h-24 shrink-0" aria-hidden="true" />
+  );
+
+  const renderRow = (rowIndex: number) => {
+    const leftRow = leftRows[rowIndex] ?? [];
+    const rightRow = rightRows[rowIndex] ?? [];
+    const leftFill = Math.max(0, columnsPerSide - leftRow.length);
+    const rightFill = Math.max(0, columnsPerSide - rightRow.length);
+
+    return (
+      <div key={`row-${rowIndex}`} className="flex items-center justify-center gap-3">
+        <div className="flex items-center gap-3">
+          {Array.from({ length: leftFill }).map((_, i) =>
+            renderPlaceholder(`left-pad-${rowIndex}-${i}`)
+          )}
+          {leftRow.map(renderDevice)}
+        </div>
+
+        <div className="w-10 flex items-center justify-center">
+          <div className="h-10 w-px bg-border border-l-2 border-dashed" />
+        </div>
+
+        <div className="flex items-center gap-3">
+          {rightRow.map(renderDevice)}
+          {Array.from({ length: rightFill }).map((_, i) =>
+            renderPlaceholder(`right-pad-${rowIndex}-${i}`)
+          )}
+        </div>
+      </div>
+    );
+  };
 
   return (
     <div className="px-0.5 py-8 space-y-6">
-      <div className="flex items-start justify-center gap-6">
+      <div className="space-y-4">
-        <div
+        {Array.from({ length: totalRows }).map((_, i) => renderRow(i))}
-          className="grid flex-1 gap-3"
-          style={{ gridTemplateColumns, justifyContent: "end" }}
-        >
-          {leftDevices.map(renderDevice)}
-        </div>
-
-        <div className="flex items-stretch justify-center w-6">
-          <div className="w-px bg-border border-l-2 border-dashed" />
-        </div>
-
-        <div
-          className="grid flex-1 gap-3"
-          style={{ gridTemplateColumns, justifyContent: "start" }}
-        >
-          {rightDevices.map(renderDevice)}
-        </div>
       </div>
       <div className="flex items-center justify-between px-4 pb-6 border-b-2 border-dashed">
         <div className="flex items-center gap-3 px-6 py-4 bg-muted rounded-lg border-2 border-border">