From 0358e7d3315b320e241af6d5e292a3c655f5395a Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Fri, 3 Oct 2025 12:04:07 +0000
Subject: [PATCH] fix: Resolve HTML nesting errors in DeviceTrustManagement
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../settings/DeviceTrustManagement.tsx        | 52 +++++++++----------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/maternal-web/components/settings/DeviceTrustManagement.tsx b/maternal-web/components/settings/DeviceTrustManagement.tsx
index ce3f8fb..8244493 100644
--- a/maternal-web/components/settings/DeviceTrustManagement.tsx
+++ b/maternal-web/components/settings/DeviceTrustManagement.tsx
@@ -203,37 +203,33 @@ export function DeviceTrustManagement() {
                     <ListItem>
                       <Box sx={{ mr: 2 }}>{getPlatformIcon(device.platform)}</Box>
                       <ListItemText
-                        primary={
-                          <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>
-                        }
+                        primary={device.platform || 'Unknown Platform'}
                         secondary={
-                          <Box>
-                            <Typography variant="body2" color="text.secondary">
-                              Device: {device.deviceFingerprint}
-                            </Typography>
-                            <Typography variant="body2" color="text.secondary">
-                              Last seen: {formatDistanceToNow(new Date(device.lastSeen))} ago
-                            </Typography>
-                          </Box>
+                          <>
+                            Device: {device.deviceFingerprint}
+                            <br />
+                            Last seen: {formatDistanceToNow(new Date(device.lastSeen))} ago
+                          </>
                         }
+                        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