Improve UI consistency and device list organization

- Style edit button to match wake/delete button appearance
- Sort device lists by IP address in main table and scan results
- Ensure consistent button styling across desktop and mobile views

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/static/css/style.css

@@ -183,7 +183,7 @@ body {
     border: 1px inset #D4D0C8;
 }
 
-.rename-btn {
+.edit-btn {
     background-color: #F0F0F0;
     border: 1px outset #D4D0C8;
     padding: 6px 8px;
@@ -194,11 +194,11 @@ body {
     min-width: 32px;
 }
 
-.rename-btn:hover {
+.edit-btn:hover {
     background-color: #E8E5E2;
 }
 
-.rename-btn:active {
+.edit-btn:active {
     border: 1px inset #D4D0C8;
 }
 
@@ -617,7 +617,7 @@ body {
         min-width: 40px;
     }
     
-    .rename-btn,
+    .edit-btn,
     .delete-btn {
         font-size: 16px;
         padding: 8px 10px;

app/static/js/app.js

@@ -40,7 +40,23 @@ function displayComputers(computers) {
     
     noComputersDiv.style.display = 'none';
     
-    tbody.innerHTML = computers.map(computer => `
+    // Sort computers by IP address
+    const sortedComputers = computers.slice().sort((a, b) => {
+        const ipA = a.ip || '';
+        const ipB = b.ip || '';
+        
+        if (!ipA && !ipB) return 0;
+        if (!ipA) return 1;
+        if (!ipB) return -1;
+        
+        const parseIP = (ip) => {
+            return ip.split('.').map(num => parseInt(num, 10).toString().padStart(3, '0')).join('.');
+        };
+        
+        return parseIP(ipA).localeCompare(parseIP(ipB));
+    });
+    
+    tbody.innerHTML = sortedComputers.map(computer => `
         <tr>
             <td>
                 <button class="wake-btn" onclick="wakeComputer('${computer.mac}', '${computer.name}', '${computer.ip || ''}')" title="Trezește calculatorul">
@@ -293,6 +309,22 @@ function displayScanResults(computers, existingComputers = []) {
         return;
     }
     
+    // Sort computers by IP address
+    const sortedComputers = computers.slice().sort((a, b) => {
+        const ipA = a.ip || '';
+        const ipB = b.ip || '';
+        
+        if (!ipA && !ipB) return 0;
+        if (!ipA) return 1;
+        if (!ipB) return -1;
+        
+        const parseIP = (ip) => {
+            return ip.split('.').map(num => parseInt(num, 10).toString().padStart(3, '0')).join('.');
+        };
+        
+        return parseIP(ipA).localeCompare(parseIP(ipB));
+    });
+    
     // Create a set of existing MAC addresses for quick lookup (normalize to lowercase)
     const existingMACs = new Set(existingComputers.map(comp => comp.mac.toLowerCase()));
     
@@ -320,7 +352,7 @@ function displayScanResults(computers, existingComputers = []) {
             <tbody>
     `;
     
-    computers.forEach((computer, index) => {
+    sortedComputers.forEach((computer, index) => {
         const computerMAC = computer.mac.toLowerCase();
         const deviceExists = existingMACs.has(computerMAC);
         const rowClass = deviceExists ? 'device-exists' : '';