style: refine platform management table layouts

src/pages/runtime/RuntimeDeviceControlPage.tsx

@@ -20,7 +20,7 @@ type HeadscaleNode = {
 };
 
 type AclRule = { id: string; action: string; sources: string[]; destinations: string[] };
-type PlatformRow = HeadscaleNode & { device?: PlatformDevice; controllers: string[] };
+type PlatformRow = HeadscaleNode & { device?: PlatformDevice; controllers: string[]; no: number };
 
 function normalize(value?: string | null) {
   return (value ?? '').toLowerCase().replace(/[^a-z0-9]/g, '');
@@ -55,8 +55,10 @@ export function RuntimeDeviceControlPage() {
     ])
       .then(([nodeResponse, aclResponse, devices]) => {
         const rules = aclResponse.policy?.acls ?? [];
-        setRows((nodeResponse.nodes ?? []).map((node) => ({
+        const nodes = nodeResponse.nodes ?? [];
+        setRows(nodes.map((node, index) => ({
           ...node,
+          no: nodes.length - index,
           device: findDevice(node, devices),
           controllers: findControllers(node, rules),
         })));
@@ -71,6 +73,7 @@ export function RuntimeDeviceControlPage() {
 
   const columns = useMemo<Array<DataTableColumn<PlatformRow>>>(
     () => [
+      { key: 'no', header: 'No.', className: 'w-14 px-3 py-3 text-center font-medium', cell: (row) => <span>{row.no}</span> },
       {
         key: 'platform',
         header: '플랫폼',