Adjusted Device List design and column widths

Data/Server/WebUI/src/Devices/Device_List.jsx

@@ -782,7 +782,7 @@ export default function DeviceList({
             py: 0.35,
             borderRadius: 999,
             bgcolor: statusColor(status),
-            color: "#fff",
+            color: "#000",
             fontWeight: 600,
             fontSize: "13px",
             lineHeight: 1,
@@ -822,71 +822,91 @@ export default function DeviceList({
             field: "status",
             headerName: col.label,
             cellRenderer: statusCellRenderer,
-            width: 140,
-            minWidth: 140,
+            width: 100,
+            minWidth: 100,
             flex: 0,
           };
         case "agentVersion":
           return {
             field: "agentVersion",
             headerName: col.label,
-            minWidth: 160,
+            width: 140,
+            minWidth: 150,
+            flex: 0,
           };
         case "site":
           return {
             field: "site",
             headerName: col.label,
             valueGetter: (params) => params.data?.site || "Not Configured",
-            minWidth: 180,
+            width: 170,
+            minWidth: 170,
+            flex: 0,
           };
         case "hostname":
           return {
             field: "hostname",
             headerName: col.label,
             cellRenderer: hostnameCellRenderer,
-            minWidth: 220,
+            width: 210,
+            minWidth: 210,
+            flex: 0,
           };
         case "description":
           return {
             field: "description",
             headerName: col.label,
-            minWidth: 220,
+            width: 280,
+            minWidth: 280,
+            flex: 0,
           };
         case "lastUser":
           return {
             field: "lastUser",
             headerName: col.label,
-            minWidth: 160,
+            width: 220,
+            minWidth: 220,
+            flex: 0,
           };
         case "type":
           return {
             field: "type",
             headerName: col.label,
-            minWidth: 140,
+            width: 170,
+            minWidth: 170,
+            flex: 0,
           };
         case "os":
           return {
             field: "os",
             headerName: col.label,
-            minWidth: 200,
+            width: 410,
+            minWidth: 410,
+            flex: 0,
           };
         case "internalIp":
           return {
             field: "internalIp",
             headerName: col.label,
-            minWidth: 160,
+            width: 140,
+            minWidth: 140,
+            flex: 0,
           };
         case "externalIp":
           return {
             field: "externalIp",
             headerName: col.label,
-            minWidth: 160,
+            width: 140,
+            minWidth: 140,
+            flex: 0,
           };
         case "lastReboot":
           return {
             field: "lastReboot",
             headerName: col.label,
-            minWidth: 200,
+            width: 180,
+            minWidth: 180,
+            flex: 0,
           };
         case "created":
           return {
@@ -896,7 +916,9 @@ export default function DeviceList({
               formatCreated(params.data?.created, params.data?.createdTs),
             comparator: (a, b, nodeA, nodeB) =>
               (nodeA?.data?.createdTs || 0) - (nodeB?.data?.createdTs || 0),
-            minWidth: 220,
+            width: 200,
+            minWidth: 200,
+            flex: 0,
           };
         case "lastSeen":
           return {
@@ -905,31 +927,41 @@ export default function DeviceList({
             valueGetter: (params) => formatLastSeen(params.data?.lastSeen),
             comparator: (a, b, nodeA, nodeB) =>
               (nodeA?.data?.lastSeen || 0) - (nodeB?.data?.lastSeen || 0),
-            minWidth: 220,
+            width: 200,
+            minWidth: 200,
+            flex: 0,
           };
         case "agentId":
           return {
             field: "agentId",
             headerName: col.label,
-            minWidth: 200,
+            width: 290,
+            minWidth: 290,
+            flex: 0,
           };
         case "agentHash":
           return {
             field: "agentHash",
             headerName: col.label,
-            minWidth: 220,
+            width: 365,
+            minWidth: 365,
+            flex: 0,
           };
         case "agentGuid":
           return {
             field: "agentGuid",
             headerName: col.label,
-            minWidth: 240,
+            width: 345,
+            minWidth: 345,
+            flex: 0,
           };
         case "domain":
           return {
             field: "domain",
             headerName: col.label,
-            minWidth: 180,
+            width: 160,
+            minWidth: 160,
+            flex: 0,
           };
         case "uptime":
           return {
@@ -940,7 +972,9 @@ export default function DeviceList({
               formatUptime(params.data?.uptime || 0),
             comparator: (a, b, nodeA, nodeB) =>
               (nodeA?.data?.uptime || 0) - (nodeB?.data?.uptime || 0),
-            minWidth: 160,
+            width: 140,
+            minWidth: 140,
+            flex: 0,
           };
         case "memory":
         case "network":
@@ -1021,7 +1055,7 @@ export default function DeviceList({
   return (
     <Paper
       sx={{
-        m: 0,
+        m: 2,
         p: 0,
         bgcolor: "#1e1e1e",
         fontFamily: gridFontFamily,
@@ -1171,7 +1205,8 @@ export default function DeviceList({
           </Button>
         </Box>
       </Box>
-      <Box sx={{ px: 2, pb: 2, flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
+      {/* The Size of the Grid itself and its margins relative to the overall page */}
+      <Box sx={{ mt: '10px', px: 2, pb: 2, flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }}> 
         <Box
           className={gridWrapperClass}
           sx={{