Enhance mobile UI and network scanning experience

- Fix modal scroll issues on mobile devices with proper viewport constraints
- Remove status column and apply status colors directly to device names
- Reorder columns: IP before MAC for better logical flow
- Optimize table layout for mobile with reduced padding and text ellipsis
- Implement visual disabled state for existing devices in scan modal
- Add intelligent device comparison to prevent duplicate additions
- Exclude Docker bridge networks from Linux scanning fallback
- Improve scan result handling with better error messaging

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

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

app/static/css/style.css

@@ -129,6 +129,23 @@ body {
     background-color: #E0E0E0;
 }
 
+.computer-name {
+    font-weight: bold;
+}
+
+.computer-name.online {
+    color: #008000;
+}
+
+.computer-name.offline {
+    color: #800000;
+}
+
+.computer-name.unknown {
+    color: #808000;
+}
+
+/* Keep status class for scan modal compatibility */
 .status {
     font-size: 14px;
     padding: 2px 6px;
@@ -479,9 +496,45 @@ body {
     margin: 0;
 }
 
-/* Wider scan modal for the additional column */
+.device-checkbox:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+/* Styles for existing/disabled devices in scan modal */
+.scan-table tr.device-exists {
+    background-color: #f5f5f5;
+    color: #999;
+    opacity: 0.7;
+}
+
+.scan-table tr.device-exists td {
+    color: #999;
+}
+
+.scan-table tr.device-exists:hover {
+    background-color: #f5f5f5;
+}
+
+.scan-table tr.device-exists .add-btn {
+    background-color: #e8e8e8;
+    color: #999;
+    cursor: not-allowed;
+    border: 1px solid #d4d4d4;
+}
+
+/* Wider scan modal for the additional column with proper scrolling */
 #scanModal .modal-content {
     width: 700px;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+}
+
+#scanModal .modal-body {
+    overflow-y: auto;
+    max-height: 70vh;
+    flex: 1;
 }
 
 /* Mobile responsiveness */
@@ -633,6 +686,12 @@ body {
     #scanModal .modal-content {
         width: calc(100vw - 20px);
         max-width: 100%;
+        max-height: 90vh;
+    }
+    
+    #scanModal .modal-body {
+        max-height: 60vh;
+        overflow-y: auto;
     }
     
     .no-computers {
@@ -646,6 +705,23 @@ body {
     }
     
     .computers-table {
-        min-width: 600px;
+        min-width: 500px;
+    }
+    
+    .computer-name {
+        font-size: 15px;
+        max-width: 140px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    .computers-table td {
+        padding: 6px 4px;
+    }
+    
+    .computers-table td:first-child {
+        padding: 4px 2px;
+        gap: 2px;
     }
 }