Fix drive usage display and center status icon

Data/Server/WebUI/src/Device_Details.jsx

@@ -283,13 +283,33 @@ export default function DeviceDetails({ device, onBack }) {
   };
 
   const renderStorage = () => {
-    const rows = (details.storage || []).map((d) => ({
+    const parseNum = (val) => {
+      if (val === undefined || val === null) return undefined;
+      const n = Number(String(val).replace(/[^0-9.]/g, ""));
+      return Number.isNaN(n) ? undefined : n;
+    };
+    const rows = (details.storage || []).map((d) => {
+      const total = parseNum(d.total);
+      const rawFree = parseNum(d.free);
+      const freePct = rawFree !== undefined
+        ? rawFree <= 100
+          ? rawFree
+          : total
+          ? (rawFree / total) * 100
+          : undefined
+        : undefined;
+      let usage = parseNum(d.usage);
+      if ((usage === undefined || Number.isNaN(usage)) && freePct !== undefined) {
+        usage = 100 - freePct;
+      }
+      return {
         drive: d.drive,
         disk_type: d.disk_type,
-      usage: d.usage !== undefined ? Number(d.usage) : undefined,
+        usage,
-      total: d.total !== undefined ? Number(d.total) : undefined,
+        total,
-      free: d.free !== undefined ? Number(d.free) : undefined,
+        free: freePct,
-    }));
+      };
+    });
     if (!rows.length)
       return placeholderTable(["Drive Letter", "Disk Type", "Usage", "Total Size", "Free %"]);
     return (

Data/Server/WebUI/src/Device_List.jsx

@@ -172,18 +172,20 @@ export default function DeviceList({ onSelectDevice }) {
               sx={{ cursor: onSelectDevice ? "pointer" : "default" }}
             >
               <TableCell>
-                <span
+                <Box sx={{ display: "flex", alignItems: "center" }}>
-                  style={{
+                  <Box
+                    component="span"
+                    sx={{
                       display: "inline-block",
                       width: 10,
                       height: 10,
                       borderRadius: 10,
-                    background: statusColor(r.status),
+                      bgcolor: statusColor(r.status),
-                    marginRight: 8,
+                      mr: 1,
-                    verticalAlign: "middle"
                     }}
                   />
                   {r.status}
+                </Box>
               </TableCell>
               <TableCell>{r.hostname}</TableCell>
               <TableCell>{timeSince(r.lastSeen)}</TableCell>