fix: Resolve HTML nesting errors in DeviceTrustManagement component

Fixed React hydration warnings caused by invalid HTML nesting in the
DeviceTrustManagement component.

## Issues Fixed
- Error: "<p> cannot be a descendant of <p>"
- Error: "<div> cannot be a descendant of <p>"
- Error: "<p> cannot contain a nested <p>"
- Error: "<p> cannot contain a nested <div>"

## Root Cause
The ListItemText component renders its secondary prop as a <p> tag by default.
We were incorrectly nesting Box (<div>) and Typography (<p>) components inside
the secondary prop, causing invalid HTML structure.

## Solution
- Removed nested Box and Typography components from ListItemText props
- Used simple text content with <br /> for line breaks in secondary text
- Moved chips (Current, Trusted/Untrusted) outside of ListItemText
- Positioned chips as separate Box between ListItemText and ListItemSecondaryAction
- Maintained visual layout while fixing HTML structure

## Changes
- primary: Now just plain text (device.platform)
- secondary: Plain text with <br /> separator instead of nested Typography
- Chips: Moved to separate Box with flex layout

This ensures proper HTML semantics and eliminates hydration errors.

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

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

maternal-web/components/settings/DeviceTrustManagement.tsx

@@ -203,37 +203,33 @@ export function DeviceTrustManagement() {
                     <ListItem>
                       <Box sx={{ mr: 2 }}>{getPlatformIcon(device.platform)}</Box>
                       <ListItemText
-                        primary={
+                        primary={device.platform || 'Unknown Platform'}
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                            <Typography variant="body1">
-                              {device.platform || 'Unknown Platform'}
-                            </Typography>
-                            {device.isCurrent && (
-                              <Chip label="Current" color="primary" size="small" icon={<CheckCircle />} />
-                            )}
-                            {device.trusted ? (
-                              <Chip label="Trusted" color="success" size="small" icon={<Shield />} />
-                            ) : (
-                              <Chip
-                                label="Untrusted"
-                                color="warning"
-                                size="small"
-                                icon={<ShieldOutlined />}
-                              />
-                            )}
-                          </Box>
-                        }
                         secondary={
-                          <Box>
+                          <>
-                            <Typography variant="body2" color="text.secondary">
+                            Device: {device.deviceFingerprint}
-                              Device: {device.deviceFingerprint}
+                            <br />
-                            </Typography>
+                            Last seen: {formatDistanceToNow(new Date(device.lastSeen))} ago
-                            <Typography variant="body2" color="text.secondary">
+                          </>
-                              Last seen: {formatDistanceToNow(new Date(device.lastSeen))} ago
-                            </Typography>
-                          </Box>
                         }
+                        primaryTypographyProps={{
+                          sx: { display: 'inline', mr: 1 }
+                        }}
                       />
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap', mr: 2 }}>
+                        {device.isCurrent && (
+                          <Chip label="Current" color="primary" size="small" icon={<CheckCircle />} />
+                        )}
+                        {device.trusted ? (
+                          <Chip label="Trusted" color="success" size="small" icon={<Shield />} />
+                        ) : (
+                          <Chip
+                            label="Untrusted"
+                            color="warning"
+                            size="small"
+                            icon={<ShieldOutlined />}
+                          />
+                        )}
+                      </Box>
                       <ListItemSecondaryAction>
                         <Box sx={{ display: 'flex', gap: 1 }}>
                           <Button