Fix device card rendering with pure inline styles

- Remove all CSS class dependencies from device cards
- Use data-bt-device-id attribute instead of class-based selectors
- Add comprehensive inline styles to each element
- Change container from grid to block layout
- Add detailed console logging for debugging
- Remove potential CSS conflicts from .signal-card class

This isolates the card rendering from any CSS that might be
hiding content (like overflow:hidden on .signal-card).

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

static/css/components/device-cards.css

@@ -555,27 +555,32 @@
 }
 
 /* ============================================
-   DEVICE CARD GRID LAYOUT
+   BLUETOOTH DEVICE LIST CONTAINER
    ============================================ */
 #btDeviceListContent {
-    display: grid !important;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
-    grid-auto-rows: auto !important;
-    gap: 12px !important;
-    padding: 12px !important;
-    align-items: start !important;
+    display: block !important;
+    padding: 10px !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
 }
 
-#btDeviceListContent > * {
-    min-height: auto !important;
+/* Pure inline-styled cards - ensure no interference */
+#btDeviceListContent > div[data-bt-device-id] {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
     height: auto !important;
+    min-height: auto !important;
+    overflow: visible !important;
 }
 
+/* Legacy card support */
 #btDeviceListContent .device-card,
 #btDeviceListContent .signal-card {
-    margin: 0;
+    margin: 0 0 10px 0;
     height: auto !important;
     min-height: auto !important;
+    overflow: visible !important;
 }
 
 /* Ensure card body is visible */