andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Resolve HTML nesting errors in DeviceTrustManagement component

Browse Source 
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>
This commit is contained in:
Andrei
2025-10-03 12:04:07 +00:00
parent 16084c414d
commit 0358e7d331
1 changed files with 24 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
maternal-web/components/settings/DeviceTrustManagement.tsx
View File

@@ -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