multiline for SSIDs and IPs

frontend/src/pages/Devices.tsx

@@ -24,15 +24,27 @@ import {
 
 function Ssids({ ssids }: { ssids: string[] }) {
   if (ssids.length === 0) return <span className="text-muted-foreground">—</span>
-  const extra = ssids.length - 1
   return (
-    <span className="inline-flex items-center gap-1.5" title={ssids.join(', ')}>
+    <div className="flex flex-col gap-1">
-      <Wifi className="h-3.5 w-3.5 text-muted-foreground" />
+      {ssids.map((ssid) => (
-      {ssids[0]}
+        <span key={ssid} className="inline-flex items-center gap-1.5">
-      {extra > 0 && (
+          <Wifi className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-        <span className="text-muted-foreground">(and {extra} more…)</span>
+          {ssid}
-      )}
         </span>
+      ))}
+    </div>
+  )
+}
+
+function Ips({ value }: { value: string | null }) {
+  const ips = value?.split(',').map((ip) => ip.trim()).filter(Boolean) ?? []
+  if (ips.length === 0) return <span className="text-muted-foreground">—</span>
+  return (
+    <div className="flex flex-col gap-1">
+      {ips.map((ip) => (
+        <span key={ip}>{ip}</span>
+      ))}
+    </div>
   )
 }
 
@@ -99,7 +111,9 @@ export function Devices() {
               devices.map((d) => (
                 <TableRow key={d.ap_mac}>
                   <TableCell className="font-mono text-xs">{d.ap_mac}</TableCell>
-                  <TableCell className="font-mono text-xs">{d.nasipaddress ?? '—'}</TableCell>
+                  <TableCell className="font-mono text-xs">
+                    <Ips value={d.nasipaddress} />
+                  </TableCell>
                   <TableCell>
                     <Ssids ssids={d.ssids} />
                   </TableCell>