Make phone device rows cards matching the notifications list

Wrap compact (phone) device rows in a Card instead of a bare
Material+Divider so they get the same rounded, spaced look as the
notifications list. Drop the row divider on narrow layouts and reduce
the phone page size to 5 to account for the taller card rows.

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

frontend/lib/devices/device_list.dart

@@ -21,7 +21,7 @@ import 'device_list_sort.dart';
 // Phones show fewer devices so the list and its pagination controls fit on
 // screen at once on the common current phones (e.g. iPhone 15, Pixel 8); the
 // wider table layout has the vertical room for a full page.
-const _phonePageSize = 6;
+const _phonePageSize = 5;
 const _widePageSize = 10;
 
 class DeviceList extends StatefulWidget {
@@ -329,7 +329,8 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
                       onRefresh: () => _fetchPage(_currentPage),
                     );
             },
-            separatorBuilder: (_, _) => const Divider(height: 1),
+            separatorBuilder: (_, _) =>
+                isWide ? const Divider(height: 1) : const SizedBox.shrink(),
           ),
           if (_currentPage > 0 || _hasNextPage)
             SliverToBoxAdapter(

frontend/lib/devices/device_list_rows.dart

@@ -312,7 +312,7 @@ class DeviceRowCompact extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    return Material(
+    return Card(
       color: device.isRegistered ? null : theme.colorScheme.secondaryContainer,
       child: ListTile(
         onTap: () => context.push('/devices/${device.macAddress}'),